docs/pages/ui/components/breadcrumb.mdx - dev - githubmirror/tabler

docs/pages/ui/components/breadcrumb.mdx
61 строка3 KB
Paweł Kuna
Improve docs SEO, performance and content quality (#2841)
11 авг 2026, 15:45
11 авг 2026, 15:4539634cb
---
title: Breadcrumb
summary: A breadcrumb is used to show the current website or app location and reduce the number of actions users need to take. It helps users navigate the website hierarchy and better understand its structure.
description: Show the current page location with a breadcrumb trail. Help users navigate your site hierarchy and understand its structure.
related: [/ui/components/pagination]
layout: '@layouts/DocsMdxLayout.astro'
---
import Example from '@components/Example.astro';
import Breadcrumb from '@ui/Breadcrumb.astro';
import Icon from '@ui/Icon.astro';
import CodeDocs from '@components/CodeDocs.astro';

## Default markup

Use the `breadcrumb` class to add a breadcrumb to your interface design for better navigation. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app.

Look at the example below to see how breadcrumbs work in practice.

<Example centered>
<Breadcrumb pages={['Home', 'Library', 'Data']} />
</Example>

## Different separators

You can use different breadcrumb styles to match your website or app design. Choose between `breadcrumb-dots`, `breadcrumb-arrows`, and `breadcrumb-bullets` to create a unique look.

This example shows how to use different breadcrumb styles.

<Example vertical separated centered>
<Breadcrumb pages={['Home', 'Library', 'Data']} separator="dots" /> <Breadcrumb pages={['Home', 'Library', 'Data']} separator="arrows" /> <Breadcrumb pages={['Home', 'Library', 'Data']} separator="bullets" />
</Example>

## With icon

You can use [icons](/ui/components/icon) in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.

<Example vertical separated>
<Breadcrumb pages={['Home', 'Library', 'Data']} home-icon />
</Example>

## Muted breadcrumbs

You can use the `breadcrumb-muted` class to create a muted breadcrumb style. This style is perfect for breadcrumbs that are not the main focus of your website or app.

<Example>
<Breadcrumb pages={['Home', 'Library', 'Data']} class="breadcrumb-muted" />
</Example>

## Breadcrumb in headers

You can use breadcrumbs in [headers](/ui/layout/page-headers) to show the current page location and provide a better navigation experience. The example below demonstrates how to use breadcrumbs in headers.

<Example centered vertical>
<div class="page-header"> <div class="row align-items-center mw-100"> <div class="col"> <Breadcrumb pages={['Home', 'Library', 'Articles']} /> <h2 class="page-title"> <span class="text-truncate">How to Build a Modern Dashboard with Tabler</span> </h2> </div> <div class="col-auto"> <div class="btn-list"> <a href="#" class="btn d-none d-md-inline-flex"> <Icon name="edit" /> Edit </a> <a href="#" class="btn btn-primary">Publish</a> </div> </div> </div> </div>
</Example>

## SCSS variables

Use these SCSS variables to customize breadcrumbs. The default values are:

<CodeDocs name="breadcrumb-variables" file="core/scss/_variables.scss" />