Private Private Private Manage workspaces Account settings Categories Items header Tests Videos Participants Nav Items header Nav item 1 Nav item 2 Nav item page variant With pictogram 1 Pictogram page variant Item header Nav item 4 Nav item 5 Nav item with a really long name
Scrollable section
Renameable item Rename to display error Renameable item Renameable item Renameable item Renameable item Renameable item Renameable item A very long name that will truncate at the end Last scrollable item

Nav item 1

Content can be swapped out here. When the viewport is shorter than a scrollable section's height, it will enable overflow.

Props
ComponentPropertyDefaultTypeDescription
TkContextSwitcherTriggergroupNameundefinedstring | undefinedThe group name of the currently selected menu item.
TkContextSwitcherTriggermenuItemNameundefinedstring | undefinedThe name of the currently selected menu item.
ContextSwitcherMenuGroupnameundefinedstring | undefinedThe name that the menu items are grouped under.
TkContextSwitcherMenuItemactivefalsebooleanApplies the selected state styling when true.
TkContextSwitcherMenuItemnameundefinedstring | undefinedThis text is shown as the name of the menu item.
TkContextSwitcherMenuItemlinkundefinedstring | undefinedThe address to redirect to when the menu item is clicked.
Use a properly formatted URL here.
TkContextSwitcherMenuIteminitialundefinedstring | undefinedThe letter that is shown in the avatar displayed as part of the menu item.
TkSidebarNavshowNavCollapser'mdDownOnly''mdDownOnly' | 'all'Determines if the collapse menu nav should be displayed for larger viewports.
TkSidebardisplayMenuIconfalsebooleanThe display menu icon shows or hides the hamburger menu icon.
TkSidebarNavvisibleOnLoadForLgViewportstruebooleanWhen showNavCollapser is set to all, this can be set to determine if the sidebar nav is expanded on load. Note: the sidebar nav will always be collapsed on smaller viewports.
TkSidebarNavItemactivefalsebooleanApplies the selected state styling when true.
TkSidebarNavItemiconnullstringRenders the corresponding tk-icon.
TkSidebarNavItemrenamablefalsebooleanDisplays the tk-input upon double click, and hides the item button.
TkSidebarNavItemrenameConfigundefined
RenameSidebarItemConfig
Passes the Props to tk-input. maxLength defaults to 80. Displays hint text if set. Set the status to apply error styling to the input and hint text.
TkSidebarNavSectionscrollablefalsebooleanAllows overflow-y when enabled.
Events
ComponentEventDescription
TkContextSwitchercloseEmitted when toggling the dropdown menu from open to closed (by clicking the trigger or anywhere outside the menu)
TkSidebarNavlargeNavClosedEmitted whenever the close button is clicked on larger viewports. This can be useful for saving a user's nav state preferences.
TkSidebarNavlargeNavExpandedEmitted whenever the expand button is clicked on larger viewports. This can be useful for saving a user's nav state preferences.
TkSidebarNavItemrenameValueChangedEmitted whenever the value changes on the rename input.
TkSidebarNavItemrenameSubmitEmitted whenever the rename input is blurred, or esc is pressed.
{ hintText?: string; label: string; maxLength?: number; status?: 'ready' | 'error'; value: string; }