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

530 Valid Hostname Is Expected When Setting Up IIS 10 For Multiple Sites

C Perror Example

Converting A String To Int In Groovy