Navbar
Bootstrap-like navigation supports configurable sticky positioning, responsive collapse, dropdowns,
and nested menus.
API reference
| Slot |
Purpose |
brand |
Brand mark or logo link. Sits at the inline start. |
nav |
The primary navigation list. Slot in .cui-nav-link anchors and
.cui-dropdown wrappers for nested menus. |
actions |
Trailing actions — theme toggle, CTA button, search. Wrap in a
.cui-cluster. |
| Attribute / property |
Purpose |
sticky |
Boolean. Pins the navbar to the top of the viewport. |
sticky-offset |
Top offset when sticky. Numeric strings get px; values with a unit pass
through. |
sticky-z-index |
Stacking order when sticky. Defaults to 10. |
expanded |
Boolean. Reflects the mobile collapse state. Toggled by the hamburger button. |
navbar.toggle(force?) |
Open / close the mobile collapse panel. |
navbar.closeDropdowns(except?) |
Close every open dropdown. Pass an element to keep its branch open. |
| Markup class |
Purpose |
.cui-nav-link |
Anchor styling for top-level links. Pair with aria-current="page"
for the active state. |
.cui-dropdown / .cui-dropdown-toggle /
.cui-dropdown-menu / .cui-dropdown-item |
Nested dropdown markup. The toggle is a <button>; the menu
composes .cui-surface for its chrome, has hidden by
default, and gets unhidden by the navbar's dropdown logic. |
| Variable |
Default |
--cui-navbar-bg |
--cui-color-surface-raised |
--cui-navbar-color |
--cui-color |
--cui-navbar-border |
--cui-color-border |
--cui-navbar-width |
72rem |
--cui-navbar-gutter |
2rem |
--cui-navbar-size |
3.25rem |
--cui-navbar-padding-block |
0.75rem |
--cui-navbar-sticky-z-index |
10 |
--cui-navbar-sticky-offset |
0 |
--cui-navbar-animation-duration ·
--cui-navbar-animation-easing ·
--cui-navbar-animation-distance |
Dropdown open / close motion. |
--cui-dropdown-animation-distance |
Per-instance override for the slide distance. |
Sidenav
A vertical side rail for dashboard layouts. It collapses to an icon-only mini-rail on
wide viewports and hides off-canvas behind a backdrop below 48rem. The
cui-sidenav element injects the collapse toggle, the mobile dismiss button,
and the backdrop, and wires up the focus trap, scroll lock, and ARIA.
Toggle menu
Resize below 48rem: "Toggle menu" opens the rail as an off-canvas drawer.
At wider widths the collapse button in the header shrinks it to a mini-rail.
API reference
| Attribute / property |
Purpose |
expanded |
Boolean. Off-canvas drawer state below 48rem. Opened by a remote trigger,
closed by the dismiss button, backdrop click, or Esc. |
collapsed |
Boolean. Icon-only mini-rail state at ≥48rem. Toggled by the injected
collapse button. |
side |
start (default) or end. Docks the rail and slides
the mobile drawer from that side. |
sticky · sticky-offset · sticky-z-index |
Pins the rail full-height at ≥48rem, with a top offset and drawer stacking order. |
sidenav.toggle(force?) / open() / close() |
Open / close the off-canvas drawer. |
sidenav.collapse(force?) |
Collapse / expand the mini-rail. |
| Markup class |
Purpose |
.cui-sidenav-inner |
The visible rail surface (background, divider border, padding); stacks the
header, nav, and footer. |
.cui-sidenav-header / .cui-sidenav-brand /
.cui-sidenav-logo |
Top row with the brand lockup; the element appends the collapse toggle and
dismiss button here. |
.cui-sidenav-nav + .cui-nav-link |
The scrollable link column. Reuses the .cui-nav-link primitive;
pair with aria-current="page" for the active item. |
.cui-sidenav-icon / .cui-sidenav-label |
Per-link leading icon and text label. Every .cui-sidenav-label
hides in the collapsed mini-rail. |
.cui-sidenav-footer |
Action stack pinned to the bottom of the rail; collapses out of flow when empty. |
data-cui-sidenav-target="<id>" |
Put on any button to open the matching sidenav's mobile drawer from elsewhere
on the page. |
| Variable |
Default |
--cui-sidenav-width |
16rem |
--cui-sidenav-collapsed-width |
4.5rem |
--cui-sidenav-bg |
--cui-color-surface-raised |
--cui-sidenav-border |
--cui-color-border |
--cui-sidenav-backdrop |
rgb(0 0 0 / 40%) |
--cui-sidenav-z-index |
50 |
--cui-sidenav-sticky-offset |
0 |
--cui-sidenav-animation-duration ·
--cui-sidenav-animation-easing |
Drawer / collapse motion. |