Navigation and structure

Closable tabs, menu bar, tree, bottom tab bar, bottom sheet, nav rail, stepper, command palette, split pane and the keyboard layer. Every state is drawn by the theme; behaviour (closing, filtering, arrow keys) is the app's.

Compare signature navigation patterns

Closable tabs

.tabs.is-scroll keeps one row and scrolls sideways; a closable .tab wraps the tab button and its .btn-close. The add button sticks to the end.

Active tab, an unsaved tab (dot), an icon tab truncated at --tab-max, and overflow scrolling.

A strip that fits: the add button follows the last tab (icon form).

Menu bar

ul.menubar uses the nested-list markup of the context menu. Hover, focus or tap a top item; the second bar has File held open with aria-expanded="true".

Tree view

ul.tree with <details>: expand and collapse with no JS. The selected row uses aria-current.

Explorer

ftl-themes
- core
  - components
    
    navigation.css
    
    instruments.css
  - core.css
  - layout.css
- themes
  - blue-future
  - windows95
- PLAN.md
- LICENSE (read-only)

Tree with roles (app adds arrow keys)

Inputs
Buses

Bottom tab bar

nav.tabbar: the mobile primary nav. Icon and label, active with aria-current, a badge, safe-area padding. In the shell it can be the status row (<nav class="app-status tabbar">).

Bottom sheet

dialog.sheet: the mobile counterpart of the modal and dropdown, anchored to the bottom edge with a drag-handle mark.

Collapsible nav rail

nav.nav-rail of .nav-items: labels on desktop, icon-only up to 900px. .is-collapsed and .is-expanded force either. (The shell's .app-rail stays decorative.)

Responsive rail: labels on desktop, icon-only at 900px and below.

.is-collapsed: icon-only at every width; the label is still the link's name.

Stepper

ol.steps: done (.is-done), current (aria-current="step"), upcoming, and error (.is-error). Vertical with .is-vertical, and on phones.

Account
Plan
Billing Card or invoice
Review

Upload
Map columns 3 columns unmatched
Validate
Import
Done

Connect to Wi-Fi Studio-5G
Update firmware v4.2.1 installed
Pair the control surface Hold the pairing key for three seconds
Name the device

Command palette

dialog.command: a search field, grouped results in a listbox (aria-selected marks the highlighted one), shortcut hints and a footer.

No commands match “qwzx”.

Split pane

.split: drag the corner grip of the first pane (CSS resize). With a .split-handle the app drives --split-size. Panes stack on phones.

Folders

This pane resizes with the browser's grip in its bottom corner.

Message

Hi team, the v5 navigation components are ready for review. The split pane holds any content; long words like https://example.com/a/very/long/url/that/wraps wrap inside the pane.

Outline

Pane with a JS handle.

Editor

Focus the handle with Tab and use the arrow keys (demo script below).

Query

SELECT * FROM tracks WHERE bpm > 120;

Results

42 rows.

Keyboard layer

<kbd> hints in buttons, menus and tooltips (data-shortcut); key combinations as nested <kbd>; the .shortcuts overlay (press ? in an app); inset roving-focus rings in composite widgets.

Press Ctrl+Shift+P to open the palette.

Menu with hints

Roving focus (arrow keys)

Keyboard shortcuts (inline preview)

General

Command palette: Ctrl+K
Show shortcuts: ?
Settings: Ctrl+,

Navigation

Go to inbox: G then I
Next item: J
Previous item: K