# Breadcrumb [component-header:sl-breadcrumb] Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy. Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation. ```html preview Catalog Clothing Women's Shirts & Tops ``` ## Examples ### Breadcrumb Links By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you'll need to add event listeners to handle clicks. For websites, you'll probably want to use links instead. You can make any breadcrumb item a link by applying an `href` attribute to it. Now, when the user activates it, they'll be taken to the corresponding page — no event listeners required. ```html preview Homepage Our Services Digital Media Web Design ``` ### Custom Separators Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image. ```html preview First Second Third
First Second Third
/ First Second Third ``` ### Prefixes Use the `prefix` slot to add content before any breadcrumb item. ```html preview Home Articles Traveling ``` ### Suffixes Use the `suffix` slot to add content after any breadcrumb item. ```html preview Documents Policies Security ``` ### With Dropdowns Dropdown menus can be placed in a prefix or suffix slot to provide additional options. ```html preview Homepage Our Services Digital Media Web Design Web Design Web Development Marketing ``` [component-metadata:sl-breadcrumb]