Breadcrumbs Bootstrap 4 Code Example


Example 1: bootstrap breadcrumb

<nav aria-label="breadcrumb">   <ol class="breadcrumb">     <li class="breadcrumb-item"><a href="#">Home</a></li>     <li class="breadcrumb-item"><a href="#">Library</a></li>     <li class="breadcrumb-item active">Data</li>   </ol> </nav>

Example 2: bootstrap Breadcrumb

Indicate the current page’s location within a navigational hierarchy that  automatically adds separators via CSS. <nav aria-label="breadcrumb">   <ol class="breadcrumb">     <li class="breadcrumb-item active" aria-current="page">Home</li>   </ol> </nav>  <nav aria-label="breadcrumb">   <ol class="breadcrumb">     <li class="breadcrumb-item"><a href="#">Home</a></li>     <li class="breadcrumb-item active" aria-current="page">Library</li>   </ol> </nav>  <nav aria-label="breadcrumb">   <ol class="breadcrumb">     <li class="breadcrumb-item"><a href="#">Home</a></li>     <li class="breadcrumb-item"><a href="#">Library</a></li>     <li class="breadcrumb-item active" aria-current="page">Data</li>   </ol> </nav>

Example 3: bootstrap breadcrumb

<nav aria-label="breadcrumb">    <ol class="breadcrumb">       <li class="breadcrumb-item active" aria-current="page">Home</li>    </ol> </nav>  <nav aria-label="breadcrumb">    <ol class="breadcrumb">       <li class="breadcrumb-item"><a href="#">Home</a></li>       <li class="breadcrumb-item active" aria-current="page">Library</li>    </ol> </nav>  <nav aria-label="breadcrumb">    <ol class="breadcrumb">       <li class="breadcrumb-item"><a href="#">Home</a></li>       <li class="breadcrumb-item"><a href="#">Library</a></li>       <li class="breadcrumb-item active" aria-current="page">Data</li>    </ol> </nav>

Example 4: bootstrap Breadcrumb Accessibility

Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful  label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.

Comments

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?