Sidebar navigation components

Q: What shape do the navigation items take?

Every item follows the NavItemType type: label (required), plus optional href, icon (a component, not an element), badge (any React node — a string or number is auto-wrapped in a gray pill badge), items for sub-items, and divider. In SidebarNavigationSlim the icon is required on each item, since the collapsed rail shows icons only.

Q: How do I mark the current navigation item as active?

Pass the current path to the activeUrl prop. The sidebar compares it against each item's href and highlights the match, and the underlying NavItemBase also sets aria-current="page" on the active link so screen readers announce it. With a client-side router, wire activeUrl to your router's current pathname.

Q: How do I add collapsible sub-navigation?

Give an item an items array of { label, href, badge? } objects. NavList renders those inside a native <details> element with a chevron trigger, and expands the group automatically when the active item is inside it. No extra state is needed on your side. Sub-items do not render icons — NavList passes only href and badge down to each child, so an icon on a sub-item is ignored.

Q: How do I add section dividers or grouped headings to the sidebar?

For a plain rule between groups, use SidebarNavigationSectionDividers and insert { divider: true } entries into items — each one renders an <hr> in the list. For labelled groups, use SidebarNavigationSectionsSubheadings, whose items prop takes a different shape: an array of { label, items } objects, where label becomes the uppercase group heading.

Q: Does the sidebar work on mobile?

Yes, and it is built in. Each variant wraps its content in MobileNavigationHeader, which renders a compact header with a hamburger button below the lg breakpoint and opens the sidebar inside a dismissable React Aria modal dialog. SidebarNavigationSlim is the exception: on mobile it shows a full list with labels instead of the icon rail. The full sidebar is shown as a fixed column from lg upwards.

Q: How do I add a featured card or hide the account card?

SidebarNavigationSimple and SidebarNavigationDualTier accept a featureCard prop that takes any React node — for example one of the featured cards on this page — and renders it above the account card. SidebarNavigationSimple also accepts showAccountCard, which defaults to true — pass showAccountCard={false} to hide the account card. It also takes footerItems for the bottom links, and hideBorder to drop the right-hand border.

FREE

Free and open-source React sidebar navigation components built for modern applications and websites. These sidebar navigations are built using React Aria and styled with Tailwind CSS.

Installation

You can add the sidebar navigation base components to your project using the CLI or manually.

CLI

Manual

npx untitledui@latest add sidebar-navigation-base

Simple

Preview

Code

Dual-tier

Preview

Code

Slim

Preview

Code

Sections dividers

Preview

Code

Sections subheadings

Preview

Code

Featured cards

These featured cards are used to display various information in the sidebar navigation. Feel free to just swap the existing cards with any of these cards presented below.

Progress bar

Preview

Code

Progress circle

Preview

Code

Image

Get the code

New features available!

Check out the new dashboard view. Pages now load faster.

Referral link

Get the code

Refer a friend

Earn 50% back for 12 months when someone uses your link.

Onboarding steps

Get the code

Complete accountStep 3 of 4

Complete your profile
Verify your phone number
Set up 2FA and backups
Add payout bank details

Upgrade CTA

Get the code

Upgrade to PRO20% OFF

Unlock 20+ integrations, 40 GB data, and advanced reporting.

Support CTA

Get the code

Online

Need help with something?

Our experts are ready to help.

Event CTA

Get the code

Join our workshopLive

Learn how to leverage Claude to supercharge your workflow.

Message

Get the code

Mathilde Lewis2 mins ago

I’ve finished adding my notes. Happy for you to review!

Current projects

Get the code

Current projects

Free trial CTA

Get the code

Free trial24 days left

QR code

Get the code

Verify this device

Open the app and scan the QR code below to verify this device.

API reference

FeaturedCardCookiePreferences

Import FeaturedCardCookiePreferences from @/components/application/app-navigation/base-components/featured-cards. Renders a <div> element.

FeaturedCardCookiePreferences props
Prop	Type	Default	Description
`title`* (required)	`string`	—	Heading shown at the top of the card.
`description`* (required)	`ReactNode`	—	Supporting content shown below the heading. Usually a short line of body text, but any node is allowed, such as the step list and project list rendered by the onboarding and projects cards.
`confirmLabel`* (required)	`string`	—	Label for the card's primary action button.
`onDismiss`* (required)	`() => void`	—	Handler called when the user dismisses the card, from the close button in the top right corner or from the card's dismiss action.
`onConfirm`* (required)	`() => void`	—	Handler called when the user presses the card's primary action button.
`className`	`string`	—	Additional CSS class names to merge into the card's outer container.

FeaturedCardCurrentProjects

Import FeaturedCardCurrentProjects from @/components/application/app-navigation/base-components/featured-cards. Renders a <div> element.

FeaturedCardCurrentProjects props
Prop	Type	Default	Description
`title`* (required)	`string`	—	Heading shown at the top of the card.
`description`* (required)	`ReactNode`	—	Supporting content shown below the heading. Usually a short line of body text, but any node is allowed, such as the step list and project list rendered by the onboarding and projects cards.
`confirmLabel`* (required)	`string`	—	Label for the card's primary action button.
`onDismiss`* (required)	`() => void`	—	Handler called when the user dismisses the card, from the close button in the top right corner or from the card's dismiss action.
`onConfirm`* (required)	`() => void`	—	Handler called when the user presses the card's primary action button.
`className`	`string`	`"relative flex flex-col gap-4 rounded-xl bg-primary p-4 ring-1 ring-secondary ring-inset"`	Additional CSS class names to merge into the card's outer container.

FeaturedCardEventCTA

Import FeaturedCardEventCTA from @/components/application/app-navigation/base-components/featured-cards. Renders a <div> element.

FeaturedCardEventCTA props
Prop	Type	Default	Description
`title`* (required)	`string`	—	Heading shown at the top of the card.
`description`* (required)	`ReactNode`	—	Supporting content shown below the heading. Usually a short line of body text, but any node is allowed, such as the step list and project list rendered by the onboarding and projects cards.
`confirmLabel`* (required)	`string`	—	Label for the card's primary action button.
`onDismiss`* (required)	`() => void`	—	Handler called when the user dismisses the card, from the close button in the top right corner or from the card's dismiss action.
`onConfirm`* (required)	`() => void`	—	Handler called when the user presses the card's primary action button.
`className`	`string`	`"relative flex flex-col gap-4 rounded-xl bg-primary p-4 ring-1 ring-secondary ring-inset"`	Additional CSS class names to merge into the card's outer container.
`badge`	`string`	—	Text for the status badge with a dot shown beside the heading, such as a live indicator for the event. Omit it to hide the badge.

FeaturedCardFreeTrialCTA

Import FeaturedCardFreeTrialCTA from @/components/application/app-navigation/base-components/featured-cards. Renders a <div> element.

FeaturedCardFreeTrialCTA props
Prop	Type	Default	Description
`title`* (required)	`string`	—	Heading shown at the top of the card.
`onDismiss`* (required)	`() => void`	—	Handler called when the user dismisses the card, from the close button in the top right corner or from the card's dismiss action.
`confirmLabel`* (required)	`string`	—	Label for the card's primary action button.
`onConfirm`* (required)	`() => void`	—	Handler called when the user presses the card's primary action button.
`supportingText`* (required)	`string`	—	Muted text shown opposite the heading, typically how much of the trial is left.
`progress`* (required)	`number`	—	Trial progress percentage, from 0 to 100, shown in the progress bar below the heading.
`className`	`string`	`"relative flex flex-col gap-4 rounded-xl bg-primary p-4 ring-1 ring-secondary ring-inset"`	Additional CSS class names to merge into the card's outer container.

FeaturedCardImage

Import FeaturedCardImage from @/components/application/app-navigation/base-components/featured-cards. Renders a <div> element.

FeaturedCardImage props
Prop	Type	Default	Description
`title`* (required)	`string`	—	Heading shown at the top of the card.
`description`* (required)	`ReactNode`	—	Supporting content shown below the heading. Usually a short line of body text, but any node is allowed, such as the step list and project list rendered by the onboarding and projects cards.
`confirmLabel`* (required)	`string`	—	Label for the card's primary action button.
`onDismiss`* (required)	`() => void`	—	Handler called when the user dismisses the card, from the close button in the top right corner or from the card's dismiss action.
`onConfirm`* (required)	`() => void`	—	Handler called when the user presses the card's primary action button.
`imageSrc`* (required)	`string`	—	Source URL for the thumbnail shown between the text and the actions, overlaid with a play icon.
`className`	`string`	—	Additional CSS class names to merge into the card's outer container.

FeaturedCardMessage

Import FeaturedCardMessage from @/components/application/app-navigation/base-components/featured-cards. Renders a <div> element.

FeaturedCardMessage props
Prop	Type	Default	Description
`title`* (required)	`string`	—	Heading shown at the top of the card.
`description`* (required)	`ReactNode`	—	Supporting content shown below the heading. Usually a short line of body text, but any node is allowed, such as the step list and project list rendered by the onboarding and projects cards.
`confirmLabel`* (required)	`string`	—	Label for the card's primary action button.
`onDismiss`* (required)	`() => void`	—	Handler called when the user dismisses the card, from the close button in the top right corner or from the card's dismiss action.
`onConfirm`* (required)	`() => void`	—	Handler called when the user presses the card's primary action button.
`supportingText`* (required)	`string`	—	Muted text shown next to the sender's name, such as how long ago the message arrived.
`className`	`string`	`"relative flex flex-col gap-4 rounded-xl bg-primary p-4 ring-1 ring-secondary ring-inset"`	Additional CSS class names to merge into the card's outer container.

FeaturedCardOnboardingSteps

Import FeaturedCardOnboardingSteps from @/components/application/app-navigation/base-components/featured-cards. Renders a <div> element.

FeaturedCardOnboardingSteps props
Prop	Type	Default	Description
`title`* (required)	`string`	—	Heading shown at the top of the card.
`description`* (required)	`ReactNode`	—	Supporting content shown below the heading. Usually a short line of body text, but any node is allowed, such as the step list and project list rendered by the onboarding and projects cards.
`confirmLabel`* (required)	`string`	—	Label for the card's primary action button.
`onDismiss`* (required)	`() => void`	—	Handler called when the user dismisses the card, from the close button in the top right corner or from the card's dismiss action.
`onConfirm`* (required)	`() => void`	—	Handler called when the user presses the card's primary action button.
`supportingText`* (required)	`string`	—	Muted text shown opposite the heading, typically the current step count such as "Step 3 of 4".
`progress`* (required)	`number`	—	Onboarding completion percentage, from 0 to 100, shown in the progress bar below the heading.
`className`	`string`	`"relative flex flex-col gap-4 rounded-xl bg-primary p-4 ring-1 ring-secondary ring-inset"`	Additional CSS class names to merge into the card's outer container.

FeaturedCardQRCode

Import FeaturedCardQRCode from @/components/application/app-navigation/base-components/featured-cards. Renders a <div> element.

FeaturedCardQRCode props
Prop	Type	Default	Description
`title`* (required)	`string`	—	Heading shown at the top of the card.
`description`* (required)	`ReactNode`	—	Supporting content shown below the heading. Usually a short line of body text, but any node is allowed, such as the step list and project list rendered by the onboarding and projects cards.
`confirmLabel`* (required)	`string`	—	Label for the card's primary action button.
`onDismiss`* (required)	`() => void`	—	Handler called when the user dismisses the card, from the close button in the top right corner or from the card's dismiss action.
`onConfirm`* (required)	`() => void`	—	Handler called when the user presses the card's primary action button.
`className`	`string`	`"relative flex flex-col gap-4 rounded-xl bg-primary p-4 ring-1 ring-secondary ring-inset"`	Additional CSS class names to merge into the card's outer container.

FeaturedCardReferralLink

Import FeaturedCardReferralLink from @/components/application/app-navigation/base-components/featured-cards. Renders a <div> element.

FeaturedCardReferralLink props
Prop	Type	Default	Description
`title`* (required)	`string`	—	Heading shown at the top of the card.
`description`* (required)	`ReactNode`	—	Supporting content shown below the heading. Usually a short line of body text, but any node is allowed, such as the step list and project list rendered by the onboarding and projects cards.
`onDismiss`* (required)	`() => void`	—	Handler called when the user dismisses the card, from the close button in the top right corner or from the card's dismiss action.
`className`	`string`	—	Additional CSS class names to merge into the card's outer container.

FeaturedCardSupportCTA

Import FeaturedCardSupportCTA from @/components/application/app-navigation/base-components/featured-cards. Renders a <div> element.

FeaturedCardSupportCTA props
Prop	Type	Default	Description
`title`* (required)	`string`	—	Heading shown at the top of the card.
`description`* (required)	`ReactNode`	—	Supporting content shown below the heading. Usually a short line of body text, but any node is allowed, such as the step list and project list rendered by the onboarding and projects cards.
`confirmLabel`* (required)	`string`	—	Label for the card's primary action button.
`onDismiss`* (required)	`() => void`	—	Handler called when the user dismisses the card, from the close button in the top right corner or from the card's dismiss action.
`onConfirm`* (required)	`() => void`	—	Handler called when the user presses the card's primary action button.
`className`	`string`	`"relative flex flex-col gap-4 rounded-xl bg-primary p-4 ring-1 ring-secondary ring-inset"`	Additional CSS class names to merge into the card's outer container.
`badge`	`string`	—	Text for the status badge with a dot shown above the heading, such as the support team's availability. Omit it to hide the badge.

FeaturedCardUpgradeCTA

Import FeaturedCardUpgradeCTA from @/components/application/app-navigation/base-components/featured-cards. Renders a <div> element.

FeaturedCardUpgradeCTA props
Prop	Type	Default	Description
`title`* (required)	`string`	—	Heading shown at the top of the card.
`description`* (required)	`ReactNode`	—	Supporting content shown below the heading. Usually a short line of body text, but any node is allowed, such as the step list and project list rendered by the onboarding and projects cards.
`confirmLabel`* (required)	`string`	—	Label for the card's primary action button.
`onDismiss`* (required)	`() => void`	—	Handler called when the user dismisses the card, from the close button in the top right corner or from the card's dismiss action.
`onConfirm`* (required)	`() => void`	—	Handler called when the user presses the card's primary action button.
`icon`* (required)	`FC<HTMLAttributes<HTMLOrSVGElement>>`	—	Icon component rendered inside the featured icon above the heading.
`className`	`string`	`"relative flex flex-col gap-4 rounded-xl bg-primary p-4 ring-1 ring-secondary ring-inset"`	Additional CSS class names to merge into the card's outer container.
`badge`	`string`	—	Text for the small badge shown beside the heading, such as a discount label. Omit it to hide the badge.

MobileNavigationHeader

Import MobileNavigationHeader from @/components/application/app-navigation/base-components/mobile-header. Renders React Aria’s DialogTrigger — all of its props are supported.

MobileNavigationHeader props
Prop	Type	Default	Description
`children`	`ReactNode`	—	—

NavAccountCard

Import NavAccountCard from @/components/application/app-navigation/base-components/nav-account-card. Renders a <div> element.

NavAccountCard props
Prop	Type	Default	Description
`popoverPlacement`	`"bottom""bottom left""bottom right""bottom start""bottom end""top""top left""top right""top start""top end""left""left top""left bottom""start"` +8 moreShow fewer `"start top""start bottom""right""right top""right bottom""end""end top""end bottom"`	"right bottom" from the `lg` breakpoint up, "top right" below it	Where the account menu opens relative to the card.
`selectedAccountId`	`string`	`"caitlyn"`	The `id` of the account from `items` to show in the card. Nothing is rendered if no item matches, and a warning is logged.
`items`	`NavAccountType[]`	`placeholderAccounts`	The accounts the card can display. The one matching `selectedAccountId` fills the card, and the list is handed to the account menu.
`avatarRounded`	`boolean`	—	Whether the account avatar is a circle. Pass `false` for a rounded square.

NavAccountMenu

Import NavAccountMenu from @/components/application/app-navigation/base-components/nav-account-card. Renders React Aria’s Dialog — all of its props are supported.

NavAccountMenu props
Prop	Type	Default	Description
`accounts`	`NavAccountType[]`	—	The accounts offered in the "Switch account" section. Accepted for parity with `NavAccountCard`, which passes its own list down; the menu itself always renders the built-in demo accounts.
`selectedAccountId`	`string`	`"olivia"`	The `id` of the account to present as the current one — its row is highlighted and its radio button is selected.

Props from React Aria Components (11)

NavAccountMenu inherited props
Prop	Type	Default	Description
`children`	`ReactNode \| ((opts: DialogRenderProps) => ReactNode)`	—	Children of the dialog. A function may be provided to access a function to close the dialog.
`id`	`string`	—	The element's unique identifier.
`slot`	`string \| null`	—	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`className`	`string`	—	The CSS className for the element.
`render`	`DOMRenderFunction<"section", undefined>`	—	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements: You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`style`	`CSSProperties`	—	The inline style for the element.
`aria-describedby`	`string`	—	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	—	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-label`	`string`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string`	—	Identifies the element (or elements) that labels the current element.
`role`	`"dialog""alertdialog"`	`"dialog"`	The accessibility role for the dialog.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

NavButton

Import NavButton from @/components/application/app-navigation/base-components/nav-button. Renders Tooltip.

NavButton props
Prop	Type	Default	Description
`open`	`boolean`	—	Whether the collapsible nav item is open.
`href`	`string`	—	URL to navigate to when the button is clicked.
`label`	`string`	—	Label text for the button.
`icon`	`FC<{ className?: string; }>`	—	Icon component to display.
`current`	`boolean`	—	Whether the button is currently active.
`onClick`	`MouseEventHandler`	—	Handler for click events.
`className`	`string`	—	Additional CSS classes to apply to the button.
`tooltipPlacement`	`"top""right""bottom""left"`	`"right"`	Placement of the tooltip.
`children`	`ReactNode`	—	Content to display.

NavItemBase

Import NavItemBase from @/components/application/app-navigation/base-components/nav-item. Renders React Aria’s Link — all of its props are supported.

NavItemBase props
Prop	Type	Default	Description
`type`* (required)	`"collapsible""link""collapsible-child"`	—	Type of the nav item.
`icon`	`FC<HTMLAttributes<HTMLOrSVGElement>>`	—	Icon component to display.
`badge`	`ReactNode`	—	Badge to display.
`current`	`boolean`	—	Whether the nav item is currently active.
`truncate`	`boolean`	`true`	Whether to truncate the label text.
`onClick`	`MouseEventHandler`	—	Handler for click events.
`children`	`ReactNode`	—	Content to display.

NavList

Import NavList from @/components/application/app-navigation/base-components/nav-list. Renders a <ul> element.

NavList props
Prop	Type	Default	Description
`items`* (required)	`(NavItemType \| NavItemDividerType)[]`	—	List of items to display.
`activeUrl`	`string`	—	URL of the currently active item.
`className`	`string`	—	Additional CSS classes to apply to the list.

SidebarNavigationDualTier

Import SidebarNavigationDualTier from @/components/application/app-navigation/sidebar-navigation/sidebar-dual-tier. Renders MobileNavigationHeader.

SidebarNavigationDualTier props
Prop	Type	Default	Description
`items`* (required)	`NavItemType[]`	—	List of items to display.
`activeUrl`	`string`	—	URL of the currently active item.
`featureCard`	`ReactNode`	—	Feature card to display.
`footerItems`	`NavItemType[]`	`[]`	List of footer items to display.
`hideBorder`	`boolean`	—	Whether to hide the right side border.
`selectedAccountId`	`string`	—	The selected account ID of the nav account card.
`accountItems`	`NavAccountType[]`	—	The items of the nav account card.

SidebarNavigationSectionDividers

Import SidebarNavigationSectionDividers from @/components/application/app-navigation/sidebar-navigation/sidebar-section-dividers. Renders MobileNavigationHeader.

SidebarNavigationSectionDividers props
Prop	Type	Default	Description
`items`* (required)	`(NavItemType \| NavItemDividerType)[]`	—	List of items to display.
`activeUrl`	`string`	—	URL of the currently active item.

SidebarNavigationSectionsSubheadings

Import SidebarNavigationSectionsSubheadings from @/components/application/app-navigation/sidebar-navigation/sidebar-sections-subheadings. Renders MobileNavigationHeader.

SidebarNavigationSectionsSubheadings props
Prop	Type	Default	Description
`items`* (required)	`{ label: string; items: NavItemType[]; }[]`	—	List of items to display.
`activeUrl`	`string`	`"/"`	URL of the currently active item.

SidebarNavigationSimple

Import SidebarNavigationSimple from @/components/application/app-navigation/sidebar-navigation/sidebar-simple. Renders MobileNavigationHeader.

SidebarNavigationSimple props
Prop	Type	Default	Description
`items`* (required)	`NavItemType[]`	—	List of items to display.
`activeUrl`	`string`	—	URL of the currently active item.
`footerItems`	`NavItemType[]`	`[]`	List of footer items to display.
`featureCard`	`ReactNode`	—	Feature card to display.
`showAccountCard`	`boolean`	`true`	Whether to show the account card.
`hideBorder`	`boolean`	`false`	Whether to hide the right side border.
`className`	`string`	—	Additional CSS classes to apply to the sidebar.
`avatarRounded`	`boolean`	—	Whether to round the account card avatar.

SidebarNavigationSlim

Import SidebarNavigationSlim from @/components/application/app-navigation/sidebar-navigation/sidebar-slim. Renders a <div> element.

SidebarNavigationSlim props
Prop	Type	Default	Description
`items`* (required)	`(NavItemType & { icon: FC<{ className?: string; }>; })[]`	—	List of items to display.
`activeUrl`	`string`	—	URL of the currently active item.
`footerItems`	`(NavItemType & { icon: FC<{ className?: string; }>; })[]`	`[]`	List of footer items to display.
`hideBorder`	`boolean`	—	Whether to hide the border.
`hideRightBorder`	`boolean`	—	Whether to hide the right side border.

FAQs

Please refer to our frequently asked questions page for more.

There are five ready-made layouts, each exported as its own component: SidebarNavigationSimple, SidebarNavigationDualTier, SidebarNavigationSlim, SidebarNavigationSectionDividers, and SidebarNavigationSectionsSubheadings. They all take an items array and an activeUrl, so you can swap one for another without reshaping most of your data.

Every item follows the NavItemType type: label (required), plus optional href, icon (a component, not an element), badge (any React node — a string or number is auto-wrapped in a gray pill badge), items for sub-items, and divider. In SidebarNavigationSlim the icon is required on each item, since the collapsed rail shows icons only.

Pass the current path to the activeUrl prop. The sidebar compares it against each item's href and highlights the match, and the underlying NavItemBase also sets aria-current="page" on the active link so screen readers announce it. With a client-side router, wire activeUrl to your router's current pathname.

Give an item an items array of { label, href, badge? } objects. NavList renders those inside a native <details> element with a chevron trigger, and expands the group automatically when the active item is inside it. No extra state is needed on your side. Sub-items do not render icons — NavList passes only href and badge down to each child, so an icon on a sub-item is ignored.

For a plain rule between groups, use SidebarNavigationSectionDividers and insert { divider: true } entries into items — each one renders an <hr> in the list. For labelled groups, use SidebarNavigationSectionsSubheadings, whose items prop takes a different shape: an array of { label, items } objects, where label becomes the uppercase group heading.

Yes, and it is built in. Each variant wraps its content in MobileNavigationHeader, which renders a compact header with a hamburger button below the lg breakpoint and opens the sidebar inside a dismissable React Aria modal dialog. SidebarNavigationSlim is the exception: on mobile it shows a full list with labels instead of the icon rail. The full sidebar is shown as a fixed column from lg upwards.

SidebarNavigationSimple and SidebarNavigationDualTier accept a featureCard prop that takes any React node — for example one of the featured cards on this page — and renders it above the account card. SidebarNavigationSimple also accepts showAccountCard, which defaults to true — pass showAccountCard={false} to hide the account card. It also takes footerItems for the bottom links, and hideBorder to drop the right-hand border.

Section headers Drawers

Sidebar navigation components

FAQs

What sidebar navigation variants are available?

What shape do the navigation items take?

How do I mark the current navigation item as active?

How do I add collapsible sub-navigation?

How do I add section dividers or grouped headings to the sidebar?

Does the sidebar work on mobile?

How do I add a featured card or hide the account card?