# Breadcrumb > A breadcrumb shows where the current page sits in the site hierarchy and links to the levels above it. A breadcrumb trail for the current page location, with separators, icons and a muted style. Source: https://docs.tabler.io/ui/components/breadcrumb --- ## Default markup Add the `breadcrumb` class to the list and `breadcrumb-item` to each item. Mark the current page with the `active` class on its `li`. ```html ``` ## Different separators The separator is drawn in CSS and is a slash by default. `breadcrumb-dots`, `breadcrumb-arrows` and `breadcrumb-bullets` change it. ```html ``` ## With icon An item can hold an [icon](/ui/components/icon) next to or instead of the text. ```html ``` ## Muted breadcrumbs The `breadcrumb-muted` class renders the trail in the secondary text color, so it takes less attention than the page title next to it. ```html ``` ## Breadcrumb in headers A breadcrumb usually sits in the [page header](/ui/layout/page-headers), above the title: ```html

How to Build a Modern Dashboard with Tabler

Edit Publish
``` ## Accessibility - Wrap the list in `