Navigation

The breadcrumb stands on its own and is used that way — it does not belong to the sidebar layout, though that is where it most often appears. For the vertical section nav, and for the two together at both breakpoints, see Patterns.

Breadcrumb

Every crumb is your template — the component supplies the trail and the separators only. Which is why the last crumb looks different from the rest: that is a decision in the template, not a mode on the component.

Breadcrumb — default separator

Left alone the separator is the character '/'. A glyph needs separatorTemplate, which is what the app passes.

Light
  1. Profiles
  2. Community Profile
  3. Population
Dark
  1. Profiles
  2. Community Profile
  3. Population

Breadcrumb — a long current crumb

Nothing truncates on its own. The app caps the last crumb and lets it ellipsize; a design with deep trails should say what gives way, since the alternative is a row that pushes the layout sideways.

Light
  1. Profiles
  2. Community Profile
  3. Immigration, mobility and citizenship by period of arrival
Dark
  1. Profiles
  2. Community Profile
  3. Immigration, mobility and citizenship by period of arrival