Shell

Usage

Sidebar workspace

Top-nav console

Navigation folds into two rows at the top, leaving the full width to content. Suits consoles with few sections and frequent product or workspace switches.

Overview

The admin shell of a team workspace: switching sections replaces only the main area.

• ⌘K (Ctrl+K on Windows) is bound on the template root and calls preventDefault(), so the docs site's own search stays closed.
• The sidebar switches sections; New workflow adds an entry to the top of the feed.
• The bell opens the latest notification; feedback from commands and the account menu lands in the same tray and closes after 3.2 seconds.
• It plays once when it scrolls into view; a click or key press stops it, and reduced motion shows the final state.
• Wide (≥ 960px) adds a rail; narrow (< 640px) folds the sidebar into a top-bar menu.
• Top-nav console: product, workspace, notifications, and account are dropdown menus, with a Data region submenu under workspace; a project card opens its detail, and the breadcrumb walks back.
• Top-nav console: narrow (< 640px) swaps the global bar for a TxNavBar and moves the menus into a drawer.

Customization

• The navigation data is TxSidebarNav's items; the narrow menu reuses it.
• Bind shortcuts on the template root, not window or document; give search-hint a multi-character glyph such as ⌘K.
• Use a controlled TxToastPanel for notifications, not the global toast().
• With many sections, turn the main area into a router outlet (<RouterView> / <NuxtPage>).
• Top-nav console: TxDropdownMenu panels top out at 360px; for wider panels use TxPopover with an explicit width and handle focus yourself.

Related components