@fluixi-ui/sidenav

@fluixi-ui/sidenav

A persistent, collapsible side navigation rail.

A headless side navigation that lives in your layout (not modal — for a modal sheet use @fluixi-ui/drawer). 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.

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>
      <SidenavItem>
        <SidenavLink href="/settings">
          <CogIcon /> <span data-sidenav-label>Settings</span>
        </SidenavLink>
      </SidenavItem>
    </SidenavGroup>
  </SidenavNav>
  <SidenavFooter>
    <SidenavTrigger />
  </SidenavFooter>
</Sidenav>

Props (Sidenav)

• collapsed / defaultCollapsed / onCollapsedChange — controlled or uncontrolled icon-rail state.
• side — left (default) | right; sets the divider edge.
• label — accessible name for the landmark (default Sidebar).

Parts

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