Skip to content

Navigation and the shell

home says where a visitor starts and nav arranges the menu; neither defines a view, and neither hides one.

home: 'sales-dashboard',
nav: [
navGroup('sales', 'Sales', ['sales-dashboard', 'leads', { view: 'accounts', label: 'Customers' }], { icon: 'chart-line' }),
navGroup('catalog', 'Catalog', ['products'], { icon: 'package' }),
],
ui: { logo: 'address-book', shell: { placement: 'top' }, theme: { preset: 'mono' } },
  • home is required: a view id, or rules read in order ({ view, roles }, { view, signedOut: true }) that end with one with no condition.
  • A nav entry is a view id, { view, label } for a menu-only word, a navGroup(id, label, children, { icon }), or a feature’s { feature }. An entry naming a view the App does not declare is refused, with the declared ones listed.
  • A list view left out of nav is still served at its address and found by ⌘K; a dashboard that nav, home and every embed leave out is refused. What a reader may open is decided by access, not the menu.

A view’s icon, a group’s icon and ui.logo take one of the curated Phosphor names (AppIcon in schema/app.d.ts), among them house, list, kanban, calendar, chart-bar, chart-line, users, buildings, package, truck, receipt, currency-dollar, file-text, folder, tag, bell, envelope, gear, wrench, shield-check and database. A name outside the list is a type error and a load error.

Key Says
placement 'side' (default) or 'top': the sidebar, or a top bar.
rail With the side placement, folding the sidebar leaves a rail of icons; false hides it.
menu, menuSearch, counts Show the menu, its filter box, live row counts beside lists.
search, breadcrumbs, title false leaves out the search, the breadcrumbs or the title.
width, gutter, headerWidth 'full' | 'wide' | 'narrow', the side gutter, the header’s alignment.

ui.theme.preset picks a built-in look: mono (the default), canvas, iris, ink, sage, signal or tray; accent, radius and palette adjust it, and ui.customThemes registers an App’s own. Readers may pick another in Preferences. Looks shows each.