SideNav

SideNav is product-tuned navigation: grouped sections, badge slots, optional collapsed mode (icons only), and nested items via SideNavGroup.

#Default usage

<SideNav>
  <SideNavSection title="Workspace">
    <SideNavItem active href="#overview">Overview</SideNavItem>
    <SideNavItem badge={3} href="#projects">Projects</SideNavItem>
    <SideNavItem href="#releases">Releases</SideNavItem>
  </SideNavSection>
</SideNav>

#Import

import {
  SideNav,
  SideNavGroup,
  SideNavItem,
  SideNavSection,
} from "@froggdesign/enter-ui-react";

#Accessibility

The active item announces aria-current="page"; disabled items expose aria-disabled="true" and skip pointer/keyboard focus. The root uses <nav> with a configurable aria-label.

#API

• SideNav: root <nav>. Pass collapsed to hide labels and badges.
• SideNavSection: optional titled group of items.
• SideNavItem: anchor with active, disabled, icon, and badge slots.
• SideNavGroup: nested items inside a native <details> disclosure.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.