UI Component LabNavigation
Breadcrumb
A row of links to the parent pages of the current page, in order of hierarchy.
Demo
Also known as
- パンくずナビゲーション — デジタル庁デザインシステム
How to recognize it
A single line of short page names separated by “/” or “>”, usually above the page title. The last name is the current page and is not styled as a link.
Behavior
- Each name except the last links to that level of the site.
- The current page is marked with aria-current="page".
- In this demo the links do not navigate; they show where they would go.
Keyboard
| Key | Action |
|---|---|
| Tab | Moves between the links. |
| Enter | Follows the focused link. |
Usage notes
- Place it between the header and the page heading.
- On narrow screens, let it wrap instead of scrolling horizontally.
Sources
- WAI-ARIA APG: Breadcrumb Pattern (Last checked: )
- デジタル庁デザインシステムウェブサイト「パンくずナビゲーション」をもとに作成 (Last checked: )