Dock
A floating glass bar of square app buttons; the current one carries a marker below.
Examples
Dock
Anatomy
nav.dock | Fixed, centred above the bottom gutter, over the content. Leave room at the end of the page so it doesn't cover the last lines. |
> a | Square tile on a tinted fill. A <button> works too. |
a > i.icon | The tile's icon, at the large text size. |
API
| Attribute | Values | Description |
|---|---|---|
aria-current | page | On a tile: draws the small square marker below it. Any value works. |
Accessibility
- Tiles are icon-only: give each an
aria-label("Mail"), or the link has no name. - Mark the current tile with
aria-current="page"; the marker is its visual and it is announced. - Label the
<nav>(aria-label="Apps") when the page has another navigation landmark.