PrivatePrivatePrivateManage workspacesAccount settingsNav item 1Nav item 2Nav item 3
Item headerNav item 4Nav item 5Nav 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
Component
Property
Default
Type
Description
TkContextSwitcherTrigger
groupName
undefined
string | undefined
The group name of the currently selected menu item.
TkContextSwitcherTrigger
menuItemName
undefined
string | undefined
The name of the currently selected menu item.
ContextSwitcherMenuGroup
name
undefined
string | undefined
The name that the menu items are grouped under.
TkContextSwitcherMenuItem
active
false
boolean
Applies the selected state styling when true.
TkContextSwitcherMenuItem
name
undefined
string | undefined
This text is shown as the name of the menu item.
TkContextSwitcherMenuItem
link
undefined
string | undefined
The address to redirect to when the menu item is clicked.
Use a properly formatted URL here.
TkContextSwitcherMenuItem
initial
undefined
string | undefined
The letter that is shown in the avatar displayed as part of
the menu item.
TkSidebarNav
showNavCollapser
'mdDownOnly'
'mdDownOnly' | 'all'
Determines if the collapse menu nav should be displayed for
larger viewports.
TkSidebar
displayMenuIcon
false
boolean
The display menu icon shows or hides the hamburger menu icon.
TkSidebarNav
visibleOnLoadForLgViewports
true
boolean
When 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.
TkSidebarNavItem
active
false
boolean
Applies the selected state styling when true.
TkSidebarNavItem
icon
null
string
Renders the corresponding tk-icon.
TkSidebarNavItem
renamable
false
boolean
Displays the tk-input upon double click, and
hides
the item button.
TkSidebarNavItem
renameConfig
undefined
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.
TkSidebarNavSection
scrollable
false
boolean
Allows overflow-y when enabled.
Events
Component
Event
Description
TkContextSwitcher
close
Emitted when toggling the dropdown menu from open to closed
(by clicking the trigger or anywhere outside the menu)
TkSidebarNav
largeNavClosed
Emitted whenever the close button is clicked on larger
viewports. This can be useful for saving a user's nav state
preferences.
TkSidebarNav
largeNavExpanded
Emitted whenever the expand button is clicked on larger
viewports. This can be useful for saving a user's nav state
preferences.
TkSidebarNavItem
renameValueChanged
Emitted whenever the value changes on the rename input.
TkSidebarNavItem
renameSubmit
Emitted whenever the rename input is blurred, or esc is pressed.