Limitless - Responsive Web Application Kit by Eugene Kopyov

Navbars overview

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, fixed and sticky. Navbar available in 3 different sizes - large, default and small. All navbar components automatically adjust their height to match chosen navbar height.

Since navbars are available in 3 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) and small (*-sm).

Table below describes all navbar types and combinations available:

Option	Description
Type
Single navbar	Single navbar. Collapsible navbar, always displayed full width without spacings (except navbar component) and on top by default. Supports different navbar components and usually appears as a main navbar with branding info, user info and navigation.
Multiple navbars	Multiple navbars have additional display options. They can be placed one after another, mixed with page header content and main content. Second sidebar is usually used as a separate component with main navigation (in horizontal navigation layout) and alternative content.
Navbar component	Displayed as a stand-alone component: includes spacings, borders and rounded corners. Can be placed anywhere - content area, footer, header or used as a main navbar. Supports all available navbar components.
Positioning
Top single	Single top navbar, usually a main navigation toolbar.
Top multiple	Double top navbar. Can be both static or fixed, check navbar related pages.
Bottom single	Single bottom navbar, usually a main navigation toolbar.
Bottom multiple	Double bottom navbar. Can be both static or fixed, check navbar related pages.
Variations
Static	Default option. Means navbar is scrolled out along with content.
Fixed	Always sticked to the page top and always visible.
Hideable	Hide navbar on scroll down and display on scroll up. Animated by default and supports both top and bottom placement.
Styling
Light	Light background with adapted components: navigation, links etc. Requires `.navbar-light` class added to the `<navbar>` container.
Dark	Dark background with adapted components: navigation, links etc. Requires `.navbar-dark` class added to the `<navbar>` container.
Custom color	Custom background color. Requires `.navbar-dark` class and `.bg-*` color class added to the `<navbar>` container.

Navbar markup

Navbar markup is identical in all layout variations and matches default Bootstrap's markup. The only difference is navbar placement and type. Navbar component uses flexbox model, this means all components are vertically centered by default. Below you'll find markup examples of different variations of navbar component.

Static navbar

By default, top and bottom navbars have static position and scroll away along with content. This use case doesn't require any additional classes for .navbar and <body> containers, this means navbar appearance depends on its placement: in the template top static navbar is the first direct child of <body> and placed before .page-content container, bottom static navbar is placed after it.

<!-- Document body -->
<body>

	<!-- Main navbar -->
	<div class="navbar navbar-dark navbar-expand-md">

		<!-- Navbar brand -->
		<div class="navbar-brand">
			...
		</div>
		<!-- /navbar brand -->


		<!-- Mobile toggler -->
		<div class="d-md-none">
			...
		</div>
		<!-- /mobile toggler -->


		<!-- Navbar content -->
		<div class="collapse navbar-collapse" id="navbar">
			...
		</div>
		<!-- /navbar content -->

	</div>
	<!-- /main navbar -->

</body>
<!-- /document body -->

Top fixed navbar

Top fixed navbar markup is similar to static, the only difference is it requires .fixed-top class added to the <navbar> container and proper body class to add top padding:

<!-- Document body -->
<body class="navbar-top">

	<!-- Main navbar -->
	<div class="navbar navbar-dark navbar-expand-md fixed-top">

		<!-- Navbar brand -->
		<div class="navbar-brand">
			...
		</div>
		<!-- /navbar brand -->


		<!-- Mobile toggler -->
		<div class="d-md-none">
			...
		</div>
		<!-- /mobile toggler -->


		<!-- Navbar content -->
		<div class="collapse navbar-collapse" id="navbar">
			...
		</div>
		<!-- /navbar content -->

	</div>
	<!-- /main navbar -->

</body>
<!-- /document body -->

Bottom fixed navbar

Bottom fixed navbar markup is similar to static and top fixed, the only difference is it requires .fixed-bottom class added to the <navbar> container and proper body class to add bottom padding:

<!-- Document body -->
<body class="navbar-bottom">

	<!-- Main navbar -->
	<div class="navbar navbar-dark navbar-expand-md fixed-bottom">

		<!-- Navbar brand -->
		<div class="navbar-brand">
			...
		</div>
		<!-- /navbar brand -->


		<!-- Mobile toggler -->
		<div class="d-md-none">
			...
		</div>
		<!-- /mobile toggler -->


		<!-- Navbar content -->
		<div class="collapse navbar-collapse" id="navbar">
			...
		</div>
		<!-- /navbar content -->

	</div>
	<!-- /main navbar -->

</body>
<!-- /document body -->

Collapsed navbar

There is one additional option, when navbar doesn't have a logo and used as a toolbar. In this case the whole navbar becomes a link on mobiles and tables, all navbar content opens on click. Supports all options stated above:

<!-- Document body -->
<body>
	
	<!-- Footer -->
	<div class="navbar navbar-expand-lg navbar-light">
		<div class="text-center d-lg-none w-100">
			<button type="button" class="navbar-toggler dropdown-toggle" data-toggle="collapse" data-target="#navbar-footer">
				<i class="icon-unfold mr-2"></i>
				Footer
			</button>
		</div>

		<div class="navbar-collapse collapse" id="navbar-footer">
			...
		</div>
	</div>
	<!-- /footer -->

</body>
<!-- /document body -->

Navbar classes

Navbar is a complex, but very flexible component. It supports different types of content, responsive utilities manage content appearance and spacing on various screen sizes, supports multiple sizing and color options etc. And everything can be changed on-the-fly directly in HTML markup. If you can't find an option you need, you can always extend default SCSS code. Table below demonstrates all available classes that can be used within the navbar:

Class	Type	Description
`.navbar`	Required	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-light`	Required	This class is used for `dark` background colors - default dark color is set in `$navbar-light-bg` variable, feel free to adjust the color according to your needs.
`.navbar-light.alpha-*`	Optional	Combination of these classes allows you to set custom light color to the `light` navbar. Note - `.navbar-light` is required, it's responsible for correct content styling.
`.navbar-dark`	Required	This class is used for `dark` background colors - default dark color is set in `$navbar-dark-bg` variable, feel free to adjust the color according to your needs.
`.navbar-dark.bg-*`	Optional	Combination of these classes allows you to set custom dark color to the `dark` navbar. Note - `.navbar-dark` is required, it's responsible for correct content styling.
`.navbar-expand-[breakpoint]`	Optional	For navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don’t add any `.navbar-expand` class. Otherwise use this class to change when navbar content collapses behind a button.
`.navbar-brand`	Required	Class for logo container. It can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles
`.navbar-toggler`	Required	This class needs to be added to the navbar toggle button that toggles navbar content on small screens. Always used with visibility utility classes.
`.navbar-collapse`	Required	Groups and hides navbar contents by a parent breakpoint. Requires an ID for targeting collapsible container when sidebar content is collapsed.
`.navbar-nav`	Required	Responsive navigation container class that adds default styling for navbar navigation.
`.nav-item`	Required	Wrapper class for immediate parents of all navigation links. Responsible for correct styling of nav items
`.navbar-nav-link`	Required	Custom class for links within `.navbar-nav` list, it sets proper styling for links in light and dark navbars.
`.navbar-text`	Required	This class adjusts vertical alignment and horizontal spacing for strings of text
`.navbar-component`	Optional	Display navbar as a stand alone component, with border and rounded corners.
`.fixed-top`	Optional	Makes navbar sticked to the `top` of the page. Requires proper class for `<body>` container, see the table below.
`.fixed-bottom`	Optional	Makes navbar sticked to the `bottom` of the page. Requires proper class for `<body>` container, see the table below.
`.sticky-top`	Optional	Adds `position: sticky;` to the navbar - it's treated as relatively positioned until its containing block crosses a specified threshold, at which point it is treated as fixed. Support is limited.

Body classes

If you want to place navbar in non-static positions, you can choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and require custom classes added to the <body> container to prevent overlap with other elements. The following table demonstrates the list of classes for <body> container if navbar has non-static position:

Class	Description
`.navbar-top`	This class adds `top` padding to the `<body>` container. Works only with default navbar height. If another height is specified, apply another class (see the line below).
`.navbar-bottom`	This class adds `bottom` padding to the `<body>` container. Works only with default navbar height. If another height is specified, apply another class (see the line below).
`.navbar-top-[size]`	Controls `top` spacing of `<body>` container, if navbar has optional height. Available sizes: small (`-sm`) and large (`-lg`). Default navbar requires `.navbar-top` class only.
`.navbar-bottom-[size]`	Controls `bottom` spacing of `<body>` container, if navbar has optional height. Available sizes: small (`-sm`) and large (`-lg`). Default navbar requires `.navbar-bottom` class only.
`.navbar-top-[size]-[size]`	Use these classes if the layout has multiple `top` navbars, where first `[size]` is the size of the first navbar, second `[size]` - height of the second navbar. In this particular use case, `[size]` can be: `lg` if large height, `md` is default height `sm` is small height.
`.navbar-bottom-[size]-[size]`	Use these classes if the layout has multiple `bottom` navbars, where first `[size]` is the size of the first navbar, second `[size]` - height of the second navbar. In this particular use case, `[size]` can be: `lg` if large height, `md` is default height `sm` is small height.

Limitless - Navbars