SidebarPrimary
The primary navigation rail, with a collapsible width.
Usage
import {
SidebarPrimary,
SidebarPrimaryHeader,
SidebarPrimaryContent,
SidebarPrimaryFooter,
SidebarPrimarySection,
SidebarPrimaryMenu,
SidebarPrimaryMenuItem,
SidebarPrimaryMenuItemExtras,
SidebarPrimaryCollapseTrigger,
} from '@acronis-platform/ui-react';SidebarPrimary is the top-level navigation rail. It renders a <nav> and owns
a controlled/uncontrolled expanded (rail width) state. Compose a
SidebarPrimaryHeader, a SidebarPrimaryContent (one or more
SidebarPrimarySections of SidebarPrimaryMenu → SidebarPrimaryMenuItem), and
a SidebarPrimaryFooter. SidebarPrimary and SidebarPrimaryMenuItem are
polymorphic via Base UI's useRender (the render prop) — pass a router link
for menu items. Themed by the --ui-sidebar-primary-* tokens.
Examples
A full rail:
<SidebarPrimary>
<SidebarPrimaryHeader logo={<ProductLogo />} collapsedLogo={<ProductMark />} />
<SidebarPrimaryContent>
<SidebarPrimarySection>
<SidebarPrimaryMenu>
<SidebarPrimaryMenuItem href="#" icon={<MonitorIcon />} selected>
Assets
</SidebarPrimaryMenuItem>
<SidebarPrimaryMenuItem href="#" icon={<ShieldCheckIcon />}>
Protection management
</SidebarPrimaryMenuItem>
</SidebarPrimaryMenu>
</SidebarPrimarySection>
</SidebarPrimaryContent>
<SidebarPrimaryFooter>
<SidebarPrimaryMenu>
<SidebarPrimaryCollapseTrigger icon={<ChevronsLeftIcon />}>
Collapse
</SidebarPrimaryCollapseTrigger>
</SidebarPrimaryMenu>
</SidebarPrimaryFooter>
</SidebarPrimary>A trailing affordance on a menu item with SidebarPrimaryMenuItemExtras:
<SidebarPrimaryMenuItem href="#" icon={<InboxIcon />}>
My inbox
<SidebarPrimaryMenuItemExtras variant="tag" tag={<Tag variant="info">3</Tag>} />
</SidebarPrimaryMenuItem>Controlled collapse:
const [expanded, setExpanded] = React.useState(true);
<SidebarPrimary expanded={expanded} onExpandedChange={setExpanded}>
{/* … */}
</SidebarPrimary>API Reference
SidebarPrimary
SidebarPrimaryHeader
logo and collapsedLogo let you swap distinct graphics per rail state (e.g.
a full lockup vs. a monogram) instead of resizing/hiding one node. When
neither is given, children renders in both states.
SidebarPrimaryMenuItem
SidebarPrimaryMenuItemExtras
SidebarPrimaryCollapseTrigger
The other structural parts (SidebarPrimaryContent, SidebarPrimaryFooter,
SidebarPrimarySection, SidebarPrimaryMenu) accept the standard attributes
of the element they render.