Bootstrap - Navbar

About

UI - Navbar (Horizontal Menu|Navigation Header) in Bootstrap

In Bootstrap 4, the Navbar is responsive by default and utilizes flexbox to make alignment of Navbar content much easier. The navbar-header class has been removed from Bootstrap 4, and the container-fluid is no longer required for a full width Navbar.

Property

Overflow

Bootstrap doesn't know how much space the content in your navbar needs, therefore you might run into issues with content wrapping into a second row. To resolve this, you can:

  • Reduce the amount or width of navbar items.
  • Hide certain navbar items at certain screen sizes using responsive utility classes.
  • Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

Toogleable, Collapse, Breakpoints

They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

The @grid-float-breakpoint variable of the Less source control when the navbar collapses/expands. The default value is 768px (the smallest “small” or “tablet” screen).

Semantic

Be sure to use a

]] element or, if using a more generic element such as a <div>, add a role=“navigation” to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
Color
  • navbar-inverse for darker text color (black).
  • navbar-light for lighter text color (white),
Fix

The fixed navbar will overlay your other content, unless you add padding to the top or bottom of the

.

See Web - How to style a page to allow a fixed top header (Navbar / Menu) ?

Alignement

v3. Both classes will add a CSS float.

  • navbar-right
  • navbar-left

Same as pull-left and pull-right but scoped to media queries for handling of navbar components across device sizes.

Example:

@media (min-width: 768px) {
    .navbar-left {
        float: left !important;
    }

    .navbar-right {
        float: right !important;
        margin-right: -15px;
    }

    .navbar-right ~ .navbar-right {
        margin-right: 0;
    }
}
Component Tree
Container
Parent (Nav)

Nav is the combination of a nav element and a child container element to center and pad th content

Nav ClassName:

  • navbar: Provide a static navbar
  • navbar-default
  • navbar-fixed-top
  • navbar-fixed-bottom
  • navbar-static-top: scrolls away with the page
  • navbar-inverse: inverse color (black)

Child Container className (to center and pad navbar content):

  • container
  • container-fluid
Child
  • navbar-header: is 'Sticky' (non-collapsing) container
Responsive navbar

Custom styles for responsive collapsing and toggling of navbar contents powered by the collapse Bootstrap JavaScript plugin.

  • navbar-collapse: will collapse.
  • navbar-toggler: design the button for toggling the navbar when in its collapsed state
  • navbar-toggler-icon: Keep as a separate element so folks can easily override it with another icon or image file as needed.
  • navbar-expand-md, navbar-expand-sd, …: for configuring where the navbar collapses.
Element
Brand (ie Site Name)
  • navbar-brand: Used for brand, project, or site names. Generally a child of navbar-header
<a class="navbar-brand" href="#">
       <img alt="Brand" src="...">
</a>
DropDown (like Login)

See UI - DropDown

Example:

<!-- Add any additional bootstrap header items.  This is a drop-down from an icon -->
<li class="dropdown navbar-right">
  <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdown-toggle">
  <span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
  <ul class="dropdown-menu">
	<li>
	  <a href="/users/id" title="Profile">Profile</a>
	</li>
	<li>
	  <a href="/logout" title="Logout">Logout </a>
	</li>
  </ul>
</li>
navbar-nav

Custom navbar navigation (doesn't require nav, but does make use of nav-link.

Text
  • navbar-text (Like Login Name)
Example
Version4

See: https://www.codeply.com/go/cxXqBnGrPx

Navbars require:

  • a wrapping nav element with a .navbar class
  • two color scheme classes:
    • navbar-inverse or navbar-light
    • and a bg-* or own style style=“background-color: #e3f2fd;”
  • an optional .navbar-toggleable-* for responsive collapsing
<!-- Navbars require a wrapping .navbar with .navbar-toggleable-* for responsive collapsing and color scheme classes.-->
<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- Will not collapse and stay inline -->
  <div class="navbar-nav flex-row">
       <a class="navbar-brand" href="#">Navbar</a>
       <a class="nav-link d-inline-flex p-2" href="#">Link</a>
        <a class="nav-link d-inline-flex p-2 disabled" href="#">Disabled</a>    
  </div>
  <!-- Will collapse -->
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
Documentation / Reference





Discover More
Layout Shift Devtool Performance
Layout Shift: How to prevent it ? (Cumulative Layout Shit / CLS)

A layout shift occurs when the rendering of the web page shifts / move element from their current position. For instance: without the knowledge of the target ratio (via the height and width attribute...
Devtool Chrome Performance Frames
requestAnimationFrame Web Api

requestAnimationFrame is a window function that permits to run code when a frame is going to be painted. Avoiding layout shift. For instance, when you create a fixed top bar, you need to set two...



Share this page:
Follow us:
Task Runner