Navigation rules
Route: Library → Properties → Navigation hierarchy
Iteration note. This surface will change in the next pass — see REBUILD_PLAN.md → M5.6. The fields described below are the current set.
These are the global rules that describe how every page navigates. They live in a single DesignRules object and ship as the ## Navigation hierarchy section of design-system.md.
Fields
| Field | Type | Values | What it controls |
|---|---|---|---|
primaryNav |
select | left-rail · top-bar · hybrid |
Where the primary navigation lives on desktop |
navCollapseBelow |
select | mobile · tablet · desktop · never |
Below this breakpoint, the primary nav collapses into a menu |
bottomNavOnMobile |
boolean | true · false | Show a bottom nav bar on mobile widths |
mobileBreakpoint |
number | px (e.g. 480) | Mobile cutoff |
tabletBreakpoint |
number | px (e.g. 768) | Tablet cutoff |
desktopBreakpoint |
number | px (e.g. 1024) | Desktop cutoff |
showBreadcrumbsOn |
text (CSV) | layout kinds, comma-separated (e.g. detail,docs) |
Which layouts should render breadcrumbs |
focusOrder |
select | logical-dom · visual |
Keyboard focus order preference |
notes |
text | Markdown | Free-form notes for anything the schema can't capture |
Editing
Every input commits on blur. Numeric inputs reject non-numeric characters; the breadcrumb CSV is normalized (lowercase, trim) on commit.
What goes in notes
The schema captures the common decisions; notes is for everything else. Examples:
- "Logo doubles as Home link on every shell."
- "Secondary nav is a tab strip in
dashboardand a sidebar insettings." - "Skip-to-content link required on every page."
How it shows up downstream
In design-system.md:
## Navigation hierarchy
- **Primary nav placement**: left-rail
- **Collapses below**: tablet (1024px)
- **Bottom nav on mobile**: true
- **Breakpoints**: mobile 480px · tablet 768px · desktop 1024px
- **Breadcrumbs visible on**: detail, docs
- **Focus order**: logical-dom
> Notes — Logo doubles as Home link on every shell.
In tokens.css these aren't emitted — they're behavioral, not visual. They become an authoritative spec for any AI agent or human implementing nav.