# dds-breadcrumb ## Overview Names a trail of `dds-breadcrumb` items as a navigation landmark and marks the last one as the current page. Set `aria-label` on the group to name the landmark; the component supplies no label of its own. ## Usage ### Breadcrumb-group #### Naming the trail A `dds-breadcrumb-group` is a navigation landmark. Always set `aria-label` on the group, because the component supplies no label of its own and an unnamed landmark is announced without a name. The label is forwarded to the landmark inside the group. ```html Home Products Running shoes ``` #### Items Place each `dds-breadcrumb` as a direct child of the group, in order from the top of the site down to the current page. The group only looks at its direct `dds-breadcrumb` children, and the last one loses its separator by position, so a wrapper element around the items or a stray element after the last one breaks both. See `dds-breadcrumb` for what each item accepts. #### The current page The group marks its last `dds-breadcrumb` with `aria-current="page"`, so the last item renders as plain text for the page the user is on. You do not need to set it yourself. If you add or remove items, the group re-evaluates the last one and moves the mark. To choose a different current item, set `aria-current` on it yourself. When any item already carries an `aria-current` the group did not set, the group stands down and marks nothing. Set it in the markup before the group renders: the group looks again only when its items change, so adding `aria-current` to another item later leaves two items marked until the next time an item is added or removed. ```html Home Products Shoes ``` #### Long trails Items wrap onto further lines when the trail does not fit. The group does not collapse the middle of a trail into an overflow indicator: collapsing would need a label for the indicator, and a component supplies no text of its own. When a trail is too long for your layout, shorten it where the content is authored. ## Slots | Slot | Description | | ----------- | ----------------------------------------------------------------------------------------------------------- | | | The default slot | | `"default"` | The breadcrumb items, in order from the top of the site down to the current page. Accepts . | ## Shadow Parts | Part | Description | | -------- | --------------------------- | | `"root"` | The inner `