#### Content Navbar - Single

Statistics Invoices Schedule

##### Single navbar component

Standard use case for navbar is main top or optional bottom navigation with various components. But in some cases, such as toolbars with form components (filters, content navigation, tabs etc), navbar as a stand alone component can be very useful. For such cases use standard navbar markup with `.navbar-component` class added to the `.navbar` container and optional `.rounded` class for rounded corners. And now you can use navbar wherever you want within `.page-content` container. Please note - nested navbars are not supported.

###### Dark navbar component

Unlike Bootstrap's default navbar color option, where all navbars require background helper class, default background colors are set in SASS and defined in `$navbar-dark-bg` and `$navbar-light-bg` variables. So dark navbar component requires only default container classes along with optinal `.rounded` class to make all corners rounded. Additionally you can add `.bg-[color]` helper class to apply custom background color.

###### Light navbar component

Light content navbar has dark border color with alpha transparency by default. You can also use additional `.alpha-[color]` color classes along with `.border-[color]` border classes if you want to highlight the navbar with custom light color. All colors within light navbar depend on main body color, keep that in mind if you want to change main text color in SASS variables.

###### Navbar component markup

Navbar component markup is similar to default navbar markup. But in most cases navbar component doesn't use `.navbar-brand` container that occupies left navbar side, since content navbar has slightly different purpose and doesn't need brand logo. Use `.navbar-component` class to add bottom spacing and borders, and `.rounded` class to make it rounded. Navbar component supports all available navbar styling and sizing options, including all navbar components.

Light navbar markup:

    <!-- Light navbar component -->
    <div class="navbar navbar-light navbar-expand-md navbar-component">

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

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

    		<!-- Left content -->
    		<ul class="navbar-nav">
    			<li class="nav-item">
    				<a href="#" class="navbar-nav-link">Link</a>
    			</li>
    			...
    		</ul>
    		<!-- /left content -->

    		<!-- Right content -->
    		<ul class="navbar-nav ml-md-auto">
    			<li class="nav-item">
    				<a href="#" class="navbar-nav-link">Link</a>
    			</li>
    			...<!-- Navbar content -->
    		</ul>
    		<!-- /right content -->

    	</div>
    	<!-- /navbar content -->

    </div>
    <!-- /light navbar component -->

Dark navbar markup:

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

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

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

    		<!-- Left content -->
    		<ul class="navbar-nav">
    			<li class="nav-item">
    				<a href="#" class="navbar-nav-link">Link</a>
    			</li>
    			...
    		</ul>
    		<!-- /left content -->

    		<!-- Right content -->
    		<ul class="navbar-nav ml-md-auto">
    			<li class="nav-item">
    				<a href="#" class="navbar-nav-link">Link</a>
    			</li>
    			...<!-- Navbar content -->
    		</ul>
    		<!-- /right content -->

    	</div>
    	<!-- /navbar content -->

    </div>
    <!-- /dark navbar component -->

##### 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-header` | Optional | Navbar brand wrapper. This class is responsible for navbar logo section with custom background color. Must contain children `.navbar-brand` container(s).
`.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-brand-[md, xs]` | Required | These classes toggle logos - `xs` is hidden by default and is visible if main sidebar is collapsed, `md` is visible by default and is hidden when main sidebar is expanded
`.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.