Skip to content
Aback UI

Block ยท Application

Dashboard shell

A responsive application shell with persistent navigation, a mobile sheet, top bar, and page header.

Beta4 componentsRegistry JSON (opens in a new tab)
the Dashboard shell preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add dashboard-shell

The block lands at components/blocks/dashboard-shell.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • Pass your real navigation as nav with hrefs from your router. The shell renders anchors; swap them for your link component if you need client-side navigation.
  • activeHref is matched exactly against the item's href. For nested sections, pass the parent item's href as the active one, or compute it from the current path.
  • onSearch and onSignOut are optional. Omit them and the corresponding controls are not rendered, so the shipped page never shows a button that does nothing.
  • The content region is a div so the shell can sit inside an existing <main>. When the shell owns the page, replace that container with <main>; do not end up with two main landmarks.
  • The preview adds example metrics and activity. Those live outside the block source; replace them with your own data and keep the labelled example badge off the real page.

Accessibility

  • The desktop sidebar and the mobile sheet each expose a labelled Primary navigation landmark, and the current section is marked with aria-current=page.
  • The mobile trigger is a labelled button; the sheet has a title and description, traps focus while open, and returns focus to the trigger on close.
  • The user menu is a real button with an accessible name that includes the person's name, and it only appears when it has at least one destination.
  • Navigation is ordinary links, so middle-click, copy link, and browser history work. Icons are decorative and hidden from assistive technology.
  • The sidebar is hidden at narrow widths rather than compressed; below md the same sections are available through the sheet.