The UIkit breadcrumbs are basically a navigation component in which navigation items are separated by a divider and it is used to specify user location on the website.
To create UIkit breadcrumb component, simply follow the following steps.
.uk-breadcrumb class to the breadcrumb container i.e <ul> element base class.<a> elements as breadcrumb items within the list.Source Code
<ul class="uk-breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
Source Code : Output
The above source code result will be:
To create active item of the breadcrumb component, replace the <a> by <span>.
General Syntax
<ul class="uk-breadcrumb">
<li><span href="#">Active Item</span></li>
</ul>
Source Code
<ul class="uk-breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><span href="#">Active Item</span></li>
</ul>
Source Code : Output
The above source code result will be:
To make a disabled breadcrumb item, just add the .uk-disabled class to the <li> element base class.
General Syntax
<ul class="uk-breadcrumb">
<li class="uk-disabled"><a href="#">Breadcrumb Disabled Item</a></li>
</ul>
Source Code
<ul class="uk-breadcrumb">
<li><a href="#">Breadcrumb Item 1</a></li>
<li class="uk-disabled"><a href="#">Disabled Braedcrumb Item 2</a></li>
</ul>
