Drawer
The Drawer is a mobile-friendly reinterpretation of the Header’s navigation controls, adapting iconLinks, navLinks, ribbonLinks and the CTA into an overlay that ‘slides out’ from the side of smaller viewports.
Anatomy
To be effective on smaller viewports, the Drawer stacks navigation links into a collapsing, accordion-style sidebar. Given the current expectation that nav configs will contain no more than three “layers” of nested groups, subgroups are inset and styled distinctly from parent categories.
sm - lg breakpoints
On large mobile or tablet viewports, the Drawer fills the viewport vertically and expands horizontally up to a max-width set by the commonDimensionBreakpointSm design token. If the viewport exceeds that max-width value, an Overlay fill is applied behind the Drawer, and over any page content that might be visible on the remainder of the screen.
The top bar of the Drawer displays a logo, up to 3 iconLinks and a Close button. It then stacks the Sidebar and any supplied ribbon links below that, then the CTA button at the bottom of screen.
Initial (collapsed view)
Expanded sublinks
To distinguish between layers of nested links, slight variations in styling are applied to each layer (up to a currently-supported maximum of 3). Single-item links omit the chevron (and collapse action) but remain focusable for keyboard and screen-reader navigation.
mini breakpoint
To preserve screen real estate on smaller mobile screens, between mini and sm breakpoints the logo is omitted and iconLinks + close button are stacked vertically to the left (inline-start) of screen.
xs breakpoint
Below the mini breakpoint, the Drawer layout reverts to the vertically-stacked variation seen above sm (but with the logo omitted). As an accessibility consideration, this is designed to preserve reflow behaviour on zoomed or ultra-small viewports.
Additional considerations
Note that if a phone number is configured (via prop and/or supplied config), it is displayed as an additional iconLink.
Usage
import {Drawer} from '@nib/nav-layout/drawer';
Props
| Prop | Type | Default | Description |
|---|---|---|---|
logo, cta, navLinks, mode, ribbon, drawer, iconLinks, hidePhoneNumber, phoneNumber, hideCta, hideIconLinks | Accepts all the same props as the nav-layout Header component. See the Header props for more info | ||
isOpen | boolean | Whether the Drawer is hidden or not. | |
setIsOpen | (isOpen: boolean) => void | A function to toggle the isOpen prop. | |
onClose | function | A function called when the Drawer is closed. | |
onOpen | function | A function called when the Drawer is opened. |