NavItem
One link of the sidebar with an icon and an optional NavKey or count at the end. NavKey shows a short code, such as a project key.
- NavItem
- NavKey
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, NavItem
Dark theme, NavItem
High contrast theme, NavItem
UsageLink to the section Usage
import { NavItem, NavKey } from '@skribly/ui/shell'<NavItem href="/boards/web" icon={<LayoutDashboard />} end={<NavKey>WEB</NavKey>}>Website relaunch</NavItem>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The open page is marked four ways: a rule on the start edge, a lighter slab, a heavier label and an accent glyph, and aria-current="page" for screen readers; in forced colours the rule uses the Highlight colour and the label is underlined.
- The target is at least 36px tall.
- Choosing a link closes the sidebar sheet.
This demo runs through axe in all three themes on every test run. See what the tests check.