A polished app sidebar primitive matching the EnterUI docs navigation pattern.
Sidebar defines how EnterUI handles polished product navigation: glass surface, grouped sections, nested branches, active descriptions, badges, and disabled “Soon” rows.
Use the same structure as the EnterUI docs sidebar for product and documentation navigation.
<Sidebar className="docs-sidebar docs-preview-card">
<SidebarSection className="docs-sidebar__group">
<SidebarSectionTitle className="docs-sidebar__group-title" count="4">
Workspace
</SidebarSectionTitle>
<SidebarNav>
<SidebarList className="docs-sidebar__list">
<SidebarListItem>
<SidebarItem
active
className="docs-sidebar__link"
description="Current workspace health"
href="#"
>
Overview
</SidebarItem>
</SidebarListItem>
<SidebarListItem>
<SidebarBranch
active
className="docs-sidebar__subcategory"
count="2"
expanded
aria-expanded="true"
>
Projects
</SidebarBranch>
<SidebarList className="docs-sidebar__list docs-sidebar__list--nested" nested>
<SidebarListItem>
<SidebarItem
className="docs-sidebar__link docs-sidebar__link--nested"
href="#"
nested
>
Design system
</SidebarItem>
</SidebarListItem>
<SidebarListItem>
<SidebarItem
className="docs-sidebar__link docs-sidebar__link--nested"
href="#"
nested
>
Component library
</SidebarItem>
</SidebarListItem>
</SidebarList>
</SidebarListItem>
<SidebarListItem>
<SidebarItem
className="docs-sidebar__link docs-sidebar__link--disabled"
disabled
href="#"
>
Billing
</SidebarItem>
</SidebarListItem>
</SidebarList>
</SidebarNav>
</SidebarSection>
</Sidebar>import {
Sidebar,
SidebarBranch,
SidebarItem,
SidebarList,
SidebarListItem,
SidebarNav,
SidebarSection,
SidebarSectionTitle,
} from "@froggdesign/enter-ui-react";Sidebar renders an aside. SidebarNav renders nav. Active items set aria-current="page"; disabled items set aria-disabled and prevent navigation. SidebarBranch renders a real button with aria-expanded for collapsible branches.
SidebarSectionTitle: optional icon and count slots.SidebarBranch: active, expanded, count, and description for collapsible rows.SidebarItem: active, disabled, badge, description, nested, and anchor props.SidebarList and SidebarListItem: list structure for top-level and nested navigation.Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.