Usage notes
- Use for basic navigation hierarchy with a current page label.
- Limit to 3–5 levels; truncate deeper paths.
- Use BreadcrumbPage for the current location.
Usage notes
- Swap the separator to match product iconography.
- Keep separators subtle so links stay prominent.
- Use a single separator style across the app.
Usage notes
- Use when a middle level has many destinations.
- Keep menu items short and specific to that level.
- Ensure the trigger still reads like a breadcrumb.
Usage notes
- Use the ellipsis to truncate long paths.
- Expose hidden levels through a menu.
- Keep the current page visible.
Usage notes
- Use render prop to integrate custom routing links.
- Preserve link semantics and focus styles.
- Match labels to route names for clarity.
Usage notes
- Use a dropdown on desktop and a drawer on mobile.
- Keep destinations compact and easy to scan.
- Include a clear navigation label in the drawer.