Options
Basic usage
Contents are left aligned in the breadcrumb by default.
<ul class="ds-breadcrumb">
<li><a href="/" class="ds-text --icon-apps">Dashboard</a></li>
<li>Page</li>
</ul>Alternatively you can nest the list inside the breadcrumb element. The first list will be used as the left aligned breadcrumbs, additional content will right aligned.
<div class="ds-breadcrumb">
<ul>
<li><a href="/" class="ds-text --icon-apps">Dashboard</a></li>
<li><a href="/">Page</a></li>
<li><a href="/">Page</a></li>
<li><a href="/">Page</a></li>
</ul>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>Examples
Breadcrumb with theme toggle
<div class="ds-breadcrumb">
<ul>
<li><a href="/" class="ds-text --icon-apps">Dashboard</a></li>
<li><a href="/">Page</a></li>
</ul>
<label class="ds-switch --theme --hide-label --small">
<input type="checkbox">
<div>Dark Mode</div>
</label>
</div>