This component is still in Beta. Please reach out to Design System team before using it.
<tk-sidebar>
<tk-sidebar-nav>
<tk-sidebar-nav-header>Categories Items header</tk-sidebar-nav-header>
<tk-sidebar-categories-list>
<tk-sidebar-categories-item icon="test-plan" active>Tests</tk-sidebar-categories-item>
<tk-sidebar-categories-item icon="clip">Videos</tk-sidebar-categories-item>
<tk-sidebar-categories-item icon="user-group">Participants</tk-sidebar-categories-item>
</tk-sidebar-categories-list>
</tk-sidebar-nav-section>
<tk-sidebar-nav-section>
<tk-sidebar-nav-header>Nav Items header</tk-sidebar-nav-header>
<tk-sidebar-nav-item
icon="test-plan"
>
Nav item 1
</tk-sidebar-nav-item>
<tk-sidebar-nav-item icon="document">
Nav item 2
</tk-sidebar-nav-item>
<tk-sidebar-nav-item icon="highlight-reel">
Nav item 3
</tk-sidebar-nav-item>
</tk-sidebar-nav-section>
<!-- Group sections of the nav together. -->
<tk-sidebar-nav-section>
<!-- item header -->
<tk-sidebar-nav-header>
Item header
</tk-sidebar-nav-header>
<tk-sidebar-nav-item icon="template">
Nav item 4
</tk-sidebar-nav-item>
</tk-sidebar-nav-section>
<!-- Set scrollable on the section when the content is dynamic, so that it gets overflow. -->
<tk-sidebar-nav-section scrollable>
<tk-sidebar-nav-header>
Item header
</tk-sidebar-nav-header>
<!-- Set rename-visible to true when the input is focused. -->
<tk-sidebar-nav-item
icon="folder"
rename-visible="false"
>
Renameable item
</tk-sidebar-nav-item>
</tk-sidebar-nav-section>
</tk-sidebar-nav>
</tk-sidebar>
<!-- don't include this (for demo purposes only). -->
<img src="/images/sidebar-nav-example.png" alt="Example of sidebar nav rendered in browser.">
<!-- end of ignore -->
This example is best viewed on a standalone view. See full-page example. To push the main content to the side, add the sidebar-offset
utility CSS class.