November 28, 2017

UIkit Breadcrumb

UIkit Breadcrumb– Breadcrumb is basically used to represent the user location on website. Class .uk-breadcrumb is used to create breadcrumb. Here in this article we are going to explain how to use this class. You can also use our online editor to edit and run the code online.

UIkit Breadcrumb Example

Add class uk-breadcrumb to <ul> and add <li> and <a>. If you want to show active link item replace <a> by <span>. Here is simple example of breadcrumb –

UIkit Breadcrumb | Example:

<ul class="uk-breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li class="uk-disabled"><a href="#">Disabled Page</a></li>
    <li><span href="#">Active Page</span></li>
</ul>

Try it »

If you run the above example it will produce the output something like this-

Active Breadcrumb Item

Replace <a> by <span> to make an item active.

<ul class="uk-breadcrumb">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><span href="">Active Item</span></li>
</ul>

Disable Breadcrumb Item

Add class uk-disabled to <li> make disabled breadcrumb.

<ul class="uk-breadcrumb">
    <li><a href="">Item 1</a></li>
    <li class='uk-disabled'><a href="">Item 2</a></li>
</ul>

UIkit Breadcrumb