UIkit Breadcrumbs

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.

Steps To Create UIkit Breadcrumb Component

To create UIkit breadcrumb component, simply follow the following steps.

  • Step1: Add .uk-breadcrumb class to the breadcrumb container i.e <ul> element base class.
  • Step2: Use <a> elements as breadcrumb items within the list.

Example

General Syntax

      <ul class="uk-breadcrumb">
  <li><a href="#">Breadcrumb Item</a></li>
</ul>
    
Try it now

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>
    
Try it now

Source Code: Output

The above source code result will be:

Breadcrumb Active Item

To create active item of the breadcrumb component, replace the <a> by <span>.

Example

General Syntax

      <ul class="uk-breadcrumb">
  <li><span href="#">Active Item</span></li>
</ul>
    
Try it now

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>
    
Try it now

Source Code: Output

The above source code result will be:

Disabled Breadcrumb Item

To make a disabled breadcrumb item, just add the .uk-disabled class to the <li> element base class.

Example

General Syntax

      <ul class="uk-breadcrumb">
  <li class="uk-disabled"><a href="#">Breadcrumb Disabled Item</a></li>
</ul>
    
Try it now

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>
    
Try it now

Web Tutorials

UIkit Breadcrumbs
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4