Base

  • Colors
  • Icons
  • Logos
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Filters
  • Gallery card
  • Indicators
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toast
  • Toggle button
  • Typeahead

Form

  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Tabs
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message

Usertesting-next

  • Cards
  • Colors
  • Segmented Controls
  • Shadows and Elevations
  • Spacing
  • Typography

Visualizations

  • Data Colors

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.
Expand Copy
<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 -->

Description

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.