Base

  • Colors
  • Icons
  • Logos
  • Shadows and Elevations
  • Spacing
  • Typography

Components

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

Form

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

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

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

Overlay

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

Patterns

  • Full Page Message
  • Question card & Group Questions Container

Visualizations

  • Data Colors

Sidebar Navigation

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

Sidebar Nav

Categories Items header Tests Videos Participants Nav Items header 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-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 -->

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.