Sidebar Navigation

Use navigation to let users navigate to the major areas of your site.

Prop	Type	Required	Default	Description
`children`	`\| ReactElement<SidebarNavigationItemProps>[] \| ReactElement<SidebarNavigationGroupProps>[]`	Yes	—	SidebarNavigationItem and SidebarNavigationGroup rendered as children.
`defaultExpandedGroupKey`	`string`	—	—	Optional key that matches SidebarNavigationGroup.groupKey to set a group as expanded on load.
`selectedNavigationKey`	`string`	—	—	Optional key that matches SidebarNavigationItem.navigationKey to mark the selected route.

Prop	Type	Required	Default	Description
`endElement`	`ReactNode`	—	—	Optional custom element to the right of the label.
`icon`	`ComponentType<IconProps>`	—	—	Optional icon to the left of the label.
`label`	`string`	Yes	—	Label for the route that user sees.
`navigationKey`	`string`	Yes	—	Unique key that represents a route. This will be used to select the current route.
Also accepts `Omit< LinkComponentProps, 'children' >`

Prop	Type	Required	Default	Description
`endElement`	`ReactNode`	—	—	Optional custom element to the right of the label.
`icon`	`ComponentType<IconProps>`	—	—	Optional icon to the left of the label.
`label`	`string`	Yes	—	Label for the button that the user sees.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	Yes	—	Click handler for the entire component.

Prop	Type	Required	Default	Description
`children`	`\| Array<ReactElement<SidebarNavigationItemProps>> \| ReactElement<SidebarNavigationItemProps>`	Yes	—	SidebarNavigationItem or SidebarNavigationGroup rendered as children.
`groupKey`	`string`	Yes	—	Unique key for the group inside a particular SidebarNavigation.
`icon`	`ComponentType<IconProps>`	—	—	Optional icon to the left of the label. Only renders icon if startElement is not provided.
`label`	`string`	Yes	—	Label for the group that the user sees.
`startElement`	`\| ReactElement<EntityAvatarProps> \| ReactElement<UserAvatarProps>`	—	—	Optional custom element to the left of the label.

Sidebar Navigation — Guidelines

When to use sidebar navigation items and buttons, and what they should represent.

Tabs

Exposes both a set of visual primitives that have the appearance of tabs along with helpers to create semantic tabs.