Breadcrumb
The breadcrumb is a navigation component, which can be used to indicate the current page’s location within a navigational hierarchy. The separators are added automatically in CSS using pseudo-elements (.breadcrumb-item:before {...}).
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
<nav aria-label="Breadcrumb navigation example">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Breadcrumb</a></li>
</ul>
</nav>The .active class on the .breadcrumb-item indicates the current page. The <a> element inside the active breadcrumb item will be automatically disabled.
Alignment #
Breadcrumb elements can be aligned alternatively using utility classes. For example:
- The .text-center class aligns the breadcrumb to the center.
- The .text-right class aligns the breadcrumb to the right.
<!-- Aligned to center -->
<nav aria-label="...">
<ul class="breadcrumb text-center">
...
</ul>
</nav><!-- Aligned to right -->
<nav aria-label="...">
<ul class="breadcrumb text-right">
...
</ul>
</nav>Sizing #
Since breadcrumbs contain only text content, they can be sized alternatively using utility classes for font sizes, such as .font-size-16, which sets the font size to 16px. By default, the font size is 14px.
<!-- Breadcrumb sized alternatively using a font size utility class -->
<nav aria-label="...">
<ul class="breadcrumb font-size-16">
...
</ul>
</nav>
Up next:
Button group
Help us grow
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
Gold sponsor
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
Sponsors
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor image placeholder
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
Backers
The following people have generously decided to support Halfmoon.
- Ethan Fann
- Julia Koblitz
- Benjamin Listwon
- Sean Lindsay
- Daan
Become a backer on Patreon .
Subscribe for updates
- We will notify you when the framework gets a substantial update. No spam or marketing.
- You can also follow us on Twitter and stay updated that way.
