Sidebar Navigation

This component is still in Beta. Please reach out to Design System team before using it.

Sidebar Nav

Nav item 1 Nav item 2 Nav item 3 Item header Nav item 4 Item header Renameable item Example of sidebar nav rendered in browser.
<tk-sidebar visible="true">
  <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-input
          label="Folder Name"
          size="fullwidth"
          slot="rename-input"
          value="Renameable item"
        ></tk-input>
      </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 -->

Description

This example is best viewed on a standalone view. See full-page example. To support smaller viewports, the sidebar component should set the visibility attribute using an eventListener and the matchMedia API.

To push the main content to the side, add the sidebar-offset utility CSS class.