<:import src="base.htm" /> <:define tag="bs-navbar:nav" // parameters ::extra=${null} // extra classes for this instance ::items=${[ { name: 'Home', link: '#', active: true }, { name: 'Features', link: '#' }, { name: 'Pricing', link: '#' }, ]} ::brand=${'#'} ::expand=${'lg'} ::container=${'container'} // 'container' | 'container-fluid' | ... ::sticky=${false} ::fixed=${false} ::theme=${null} // 'light' | 'dark' — independent of the page ::bg=${'body-tertiary'} // private :_id=${`bs-navbar-${$id}`} :_class=${[ 'navbar', expand ? `navbar-expand-${expand}` : '', bg ? `bg-${bg}` : '', extra, ].filter(s => s).join(' ')} // The gap under the links is only wanted while they are stacked, which // is up to `expand` and not to any one breakpoint: left at `mb-lg-0` it // would survive into a bar that has already gone horizontal and push the // links up off the brand's line. A navbar that never collapses has no // stacked state to space out, hence the plain `mb-0`. :_navClass=${[ 'navbar-nav', 'me-auto', expand ? `mb-2 mb-${expand}-0` : 'mb-0', ].join(' ')} class=${_class} :class-sticky-top=${sticky} :class-fixed-top=${fixed} data-bs-theme=${theme} >