Skip to content

Breadcrumbs and pagination

Breadcrumbs show the route through a hierarchy. Pagination moves through a sequence. Use ordinary links for both, with a visible current item and destinations that still work when JavaScript is unavailable.

The examples use the shared theme and setup. Keep the .fltheme-components wrapper around Basecoat and du- component markup.

Breadcrumb · Basecoat

Show where the current page sits in a hierarchy.

Behaviour and access. Use a labelled nav and ordered list. Every ancestor is a real link; the current page uses aria-current="page" and is not a redundant self-link.

HTML · compiled output
<div class="fltheme-components">
<nav aria-label="Example hierarchy" class="breadcrumb"><ol><li><a href="../../start/">Field guide</a></li><li aria-current="page">Navigation</li></ol></nav>
</div>

Syntax and variants in Basecoat

Breadcrumbs · daisyUI

Breadcrumbs show the route back through a hierarchy. Keep the current page last and mark it with aria-current="page"; do not turn a short breadcrumb into a second menu. The component scrolls within its own box when a path is longer than the available measure.

HTML · compiled output
<div class="fltheme-components">
<nav aria-label="Example hierarchy" class="du-breadcrumbs"><ul><li><a href="../../start/">Field guide</a></li><li aria-current="page">Navigation</li></ul></nav>
</div>

Syntax and variants in daisyUI

Pagination · Basecoat

The neighbouring links move through real guide pages; the pill marks the current page. In a results application, your data source supplies the actual page URLs and current state.

HTML · compiled output
<div class="fltheme-components">
<nav aria-label="Guide pagination" class="pagination"><div class="button-group"><a class="btn" href="../menus/">1 &middot; Menus</a><span aria-current="page" class="btn">2 &middot; Location</span><a class="btn" href="../drawers/">3 &middot; Drawers</a></div></nav>
</div>

Syntax and variants in Basecoat

Pagination · daisyUI

The three links move through real guide pages in sequence. In a results application, your data source supplies the actual page URLs and current state.

HTML · compiled output
<div class="fltheme-components">
<nav aria-label="Read in order" class="du-join"><a class="du-btn du-join-item" href="../../text/type/">1 &middot; Type</a><a class="du-btn du-join-item" href="../../text/lists/">2 &middot; Lists</a><a class="du-btn du-join-item" href="../../text/links/">3 &middot; Links</a></nav>
</div>

Syntax and variants in daisyUI