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 and nav
Section titled “home and nav”homeis required: a view id, or rules read in order ({ view, roles },{ view, signedOut: true }) that end with one with no condition.- A
naventry is a view id,{ view, label }for a menu-only word, anavGroup(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
navis still served at its address and found by ⌘K; a dashboard thatnav,homeand 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.
ui.shell
Section titled “ui.shell”| 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.