AppNav
The app's main navigation: a brand rail of sections on the left, each with an optional second-level menu that flies out beside it.
Master
Hover a section for its menu; click one to open its first page. Toggle expanded for labels and default pinned to dock the menu. Tab and Enter work too.
Usage
Put one AppNav on the left of the app shell, under the AppHeader, full height. It is one component: items are the rail sections (icon and label), endItems sit at the bottom of the rail, and a section's children make its second-level menu. Hovering a section rolls its menu out beside the rail; moving off the nav or picking a link rolls it back in. The menu's header row, which holds the section name and the pin, is 48px like a rail row, over 40px link rows. Every menu is the same width, the longest link in the whole nav (within --side-nav-panel-min and --side-nav-panel-max), so the menu never resizes as people move from one section to another, whether the rail is expanded or not. Clicking a section opens its first link, so a section with no menu still works. pin docks the menu open beside the rail; the × closes it. expanded shows the labels (the AppHeader menu button toggles it). A long menu is kept on screen and scrolls with overflow rows at the top and bottom. See contracts/appnav.json for the full contract. In a box narrower than 640px, the kit's mobile break, there is no room for a rail beside the page, so the nav is a drawer: it takes its open width with the labels shown whether or not expanded is passed, and it leaves the sliding to the frame around it.
Do's
- The main navigation of the app shell, on every page.
- Sections with their own pages under them: the rail picks the section, the menu picks the page.
Don'ts
- Do not invent a Sidebar, NavRail, Flyout or local menu beside it.
- Do not put page actions, filters or tabs in it. Those belong in the page.
- Do not nest a third level. A section has one menu of links, split by dividers.
- Do not use Dropdown or Tabs for app navigation.
- Do not use raw hex.
<AppNav
items={sections}
endItems={endSections}
onNavigate={openPage}
/>