Sidebar - EnterUI

LayoutUpdated May 3, 2026

#Default usage

#Usage

import {
  Badge,
  Sidebar,
  SidebarItem,
  SidebarNav,
  SidebarSection,
  SidebarSectionTitle,
} from "@froggdesign/enter-ui";

export function Example() {
  return (
    <Sidebar className="docs-preview-card">
      <SidebarSection>
        <SidebarSectionTitle>Workspace</SidebarSectionTitle>
        <SidebarNav>
          <SidebarItem href="#" active>Overview</SidebarItem>
          <SidebarItem href="#" badge={<Badge>3</Badge>}>Projects</SidebarItem>
          <SidebarItem href="#" disabled>Billing</SidebarItem>
        </SidebarNav>
      </SidebarSection>
    </Sidebar>
  );
}

#Accessibility

Sidebar renders an aside. SidebarNav renders nav. Active items set aria-current="page"; disabled items set aria-disabled and prevent navigation.

#API

SidebarItem: active, disabled, badge, and anchor props.
Section primitives are simple layout slots.
Use public hrefs rather than app-internal deep imports.

#Styling

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

Edit this page