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="/enter-ui/docs">Overview</SideNavItem>
    <SideNavItem badge={3} href="/enter-ui/docs/components/data-view">Projects</SideNavItem>
    <SideNavItem href="/enter-ui/docs/components/release-stepper">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.

#Article table of contents

Use variant="toc" with SideNavSection and SideNavItem for compact reading navigation. Selection uses a faint neutral surface, subtle border, and small brand dot; keyboard focus remains visible. Pass aria-current="location" on the active anchor for in-page sections. data-depth={3} indents a nested heading. Scroll observation and the active section belong to the consuming app.