ConsoleShell

ConsoleShell is a dashboard frame with a collapsible sidebar, a compact navigation drawer, and an inset workspace card. Brand, navigation, and account slots stay empty so the shell can be reused without a product identity.

import { ConsoleShell } from '@lobehub/ui/dashboard';

NPM Source Edit

Layout

Default

Loading preview

The sidebar collapses to an icon rail, and folds into a drawer below the laptop breakpoint. Mod+B toggles it while focus is inside the shell. Pass storageKey to remember the rail.

APIs

ConsoleShell

ConsoleShell properties

brand

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Home mark. Rendered at the top of the sidebar.

breadcrumb

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Location shown in the top bar, usually a `Breadcrumb`.

children

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

collapsed

boolean

Collapse the sidebar to an icon rail. Ignored while compact.

collapseLabel

string

Defaults to "Collapse sidebar".

defaultCollapsed

boolean

Defaults to false.

expandLabel

string

Defaults to "Expand sidebar".

footer

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Account menu or other content pinned to the bottom of the sidebar.

hotkey

boolean

Collapse and expand with Mod+B while focus is inside the shell.

Defaults to true.

navigation

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Grouped navigation. Collapsed state comes from the shell.

onCollapsedChange

(collapsed: boolean) => void

openNavigationLabel

string

Defaults to "Open navigation".

skipToContentLabel

string

Defaults to "Skip to content".

storageKey

string

Persists the collapsed rail. Omit to keep the choice in memory only.

tools

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Actions at the end of the top bar.

Also accepts all native HTML and ARIA attributes.

ConsoleBrand

ConsoleBrand properties

href: string
Defaults to "/".
label: string
Accessible name for the home link. Defaults to `title`.
logoRequired: ReactNode
Mark shown on its own when the sidebar is an icon rail.
renderLink: (props: ConsoleBrandLinkProps) => ReactNode
Renders the home link. Use this to plug in a router `Link`. The default render is an anchor.
title: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
Name beside the mark. Omit when `logo` already includes the wordmark, such as a combine lockup.