Side Nav components are used traditionally as a secondary form of navigation where the primary navigation is located hierarchically above the page frame.
Side Nav is mostly intended to use within the Sidebar component.
<Sidebar>
<State initial={0}>
{([active, setActive]) => (
<SideNav
title={
<span>
Marketing
<Tag subtle compact>Within Sidebar</Tag>
</span>
}>
<SideNav.Item onClick={() => setActive(0)} active={active===0}>Dashboard</SideNav.Item>
<SideNav.Item onClick={() => setActive(1)} active={active===1}>Campaigns</SideNav.Item>
<SideNav.Item onClick={() => setActive(2)} active={active===2}>Emails</SideNav.Item>
<SideNav.Item onClick={() => setActive(3)} active={active===3}>Audiences</SideNav.Item>
</SideNav>
)}
</State>
</Sidebar>
<State initial={0}>
{([active, setActive]) => (
<SideNav
title={
<span>
Marketing
<Tag color="warning" subtle compact>Plain</Tag>
</span>
}>
<SideNav.Item onClick={() => setActive(0)} active={active===0} icon="odometer">Dashboard</SideNav.Item>
<SideNav.Item onClick={() => setActive(1)} active={active===1} icon="bullhorn">Campaigns</SideNav.Item>
<SideNav.Item onClick={() => setActive(2)} active={active===3} icon="email">Emails</SideNav.Item>
<SideNav.Item onClick={() => setActive(3)} active={active===4} icon="group_work">Audiences</SideNav.Item>
</SideNav>
)}
</State>
Collapsible
Side Nav item can be rendered as collapsible menu, also known as Accordion.
<Sidebar>
<State initial={0}>
{([active, setActive]) => (
<SideNav>
<SideNav.Item onClick={() => setActive(0)} active={active===0}>Dashboard</SideNav.Item>
<SideNav.Item
active={[2, 3, 4].includes(active)}
collapsible={{expanded: false}}
>
Campaigns
<SideNav>
<SideNav.Item onClick={() => setActive(2)} active={active===2}>First Item</SideNav.Item>
<SideNav.Item onClick={() => setActive(3)} active={active===3}>Second Item</SideNav.Item>
<SideNav.Item onClick={() => setActive(4)} active={active===4}>Third Item</SideNav.Item>
</SideNav>
</SideNav.Item>
<SideNav.Item
active={[5, 6, 7].includes(active)}
collapsible=