No Results Found
This component is still in Beta. Please reach out to Design System team before using it.
<tk-sidebar>
<tk-sidebar-nav>
<tk-sidebar-nav-section>
<!-- active state + icon -->
<tk-sidebar-nav-item
active="true"
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.