Navbar is a navigation component, usually displayed on top of the page and includes brand logo, navigation and other components. By default, navbar has top static position. Navbar placement can be top and bottom, types can be static and fixed. Navbar available in 4 different sizes - large, default, small and mini. All navbar components automatically adjust their height to match chosen navbar height.
Example navbar
Static navbar markup:
<!-- Default navbar -->
<div class="navbar navbar-inverse">
<div class="navbar-header">...</div>
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<!-- /default navbar -->
Top fixed navbar markup:
<!-- Body with top padding -->
<body class="navbar-top">
<!-- Top fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">...</div>
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<!-- /top fixed navbar -->
</body>
<!-- /body with top padding -->
Since navbars are available in 4 different sizes, it's required to specify proper class in <body> tag to set correct padding. If single navbar is sticked to the bottom of the page, correct body classes will be .navbar-bottom for default height and .navbar-bottom-* for given size - large (*-lg), small (*-sm) and mini (*-xs).
Example navbar
Bottom fixed navbar markup:
<!-- Body with bottom padding -->
<body class="navbar-bottom-sm">
<!-- Bottom fixed navbar -->
<div class="navbar navbar-inverse navbar-sm navbar-fixed-bottom">
<div class="navbar-header">...</div>
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<!-- /bottom fixed navbar -->
</body>
<!-- /body with bottom padding -->
Navbar is a complex and very flexible component, which allows you to control appearance of different types of content, components placement, sizes, colors etc. All this functionality is available by setting proper classes to the navbar components and navbar itself.
Table below demonstrates all available classes that can be used with the navbar:
| Class | Description |
|---|---|
.navbar |
Default navbar class, must be used with any navbar type and color. Responsible for basic navbar and navbar components styling as a parent container. |
.navbar-fixed-top |
Makes navbar sticked to the top of the page. Requires proper class for <body> tag, see the table below. |
.navbar-fixed-bottom |
Makes navbar sticked to the bottom of the page. Requires proper class for <body> tag, see the table below. |
.navbar-static-top |
Full-width navbar that scrolls away with the page. Unlike the .navbar-fixed-* classes, no need to add any extra class on the body for padding correction. |
.navbar-default.navbar-inverse |
Default color options for navbar provided by Bootstrap styles: default - white navbar, inverse - dark grey navbar. |
.navbar-default-secondary |
If you have 2 light navbars, use this class to darken one of them. Based on default navbar background color. |
.navbar-inverse.bg-* |
Optional background colors for navbar. Just add one of available color classes to apply custom color scheme. |
.navbar-component |
Display navbar as a stand alone component, with border and rounded corners. |
Bottom navbar is available only as a
fixed component, always sticked to the bottom of the page. All dropdown menus are automatically changed to dropups in this type of navbar. The fixed navbar will overlay your other content, unless you add necessary to the top of the <body>. Depending on the fixed navbar position and size, add one of the classes specified in the following table. By default, the navbar is 47px high.
| Class | Description |
|---|---|
.navbar-top.navbar-bottom |
This class adds necessary top or bottom padding to the <body> tag. Works only with default navbar height. If another height is specified, apply another class, see the line below. |
.navbar-top-*.navbar-bottom-* |
Controls padding for different navbar heights, for both positions. Available classes: mini (*-xs), small (*-sm) and large (*-lg). Default navbar requires .navbar-top(bottom)-fixed class. |
.navbar-top-*-*.navbar-bottom-*-* |
This type of classes is used only with multiple navbars. This is the only class, where *-md suffix is available. For example class .navbar-top-md-xs means main navbar has default height (.*-md-*), secondary navbar - mini height (.*-xs). It calculates both navbars height and adds top or bottom padding with the same value. |