Fluixi UI
GitHub ↗

Examples

Loading preview…

sidenav

A persistent, collapsible side navigation rail.

A headless side navigation that lives in your layout — not modal. It can collapse to an icon rail. Links are polymorphic (as) for router integration; put each label in a <span data-sidenav-label> so it hides cleanly when collapsed. For a modal off-canvas sheet, use drawer instead.

Installation

pnpm add @fluixi-ui/sidenav

Usage

import {
  Sidenav, SidenavHeader, SidenavNav, SidenavItem, SidenavLink,
  SidenavGroup, SidenavGroupLabel, SidenavFooter, SidenavTrigger,
} from '@fluixi-ui/sidenav';

<Sidenav>
  <SidenavHeader>Acme</SidenavHeader>
  <SidenavNav>
    <SidenavGroup>
      <SidenavGroupLabel>Workspace</SidenavGroupLabel>
      <SidenavItem>
        <SidenavLink href="/" active>
          <HomeIcon /> <span data-sidenav-label>Home</span>
        </SidenavLink>
      </SidenavItem>
    </SidenavGroup>
  </SidenavNav>
  <SidenavFooter>
    <SidenavTrigger />
  </SidenavFooter>
</Sidenav>

Props (Sidenav)

Prop Type Default Description
collapsed boolean — Controlled icon-rail state.
defaultCollapsed boolean false Initial uncontrolled state.
onCollapsedChange (c: boolean) => void — Called when collapse state changes.
side 'left' | 'right' 'left' Which side the rail sits on (sets the divider edge).
label string 'Sidebar' Accessible name for the landmark.

Parts

Part Description
Sidenav The <nav> rail. Owns collapse state; data-collapsed, data-side.
SidenavHeader / SidenavFooter Top and bottom regions.
SidenavNav The <ul> list of items.
SidenavItem An <li> wrapping a link.
SidenavLink A navigable link; active sets aria-current="page". Pass as for a router link.
SidenavGroup / SidenavGroupLabel A titled section; the label hides when collapsed.
SidenavTrigger Toggles the collapsed state.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.