Navbars in JTB_MD serve as intuitive elements designed to seamlessly guide users through different sections of your projects. Providing easy access to key project areas, these bars enhance user experience with straightforward navigation, ensuring a more user-friendly and accessible web environment.

How to use

To incorporate a navbar element into your project, first things first, introduce a container with the .jtbNavbar class. This element will be your main container of contents, headers and all other stuff.

Hello! I'm a navbar.

                <!-- Empty navbar with text -->
<div class='jtbNavbar'>Hello! I'm a navbar.</div>

By default, navbar elements come as blank containers that has no meanings by theirselves. To create a fully functional navbar, after creating your main container with .jtbNavbar, utilize its main components: Header & Content.

Header

The Header is the primary component that contains essential elements that remains visible even on collapsed stage of navbars. The content within this area needs to be something that you want to show your users in all circumstances, such as the brand of your project.

To incorporate a header area into your navbar, add an element with the .jtbNavbar-header class within your main container element.

                    <!-- Navbar with header -->
<div class='jtbNavbar'>
    <div class='jtbNavbar-header'>
        <i class='...'></i>
    </div>
</div>

Content

The "Content" areas on navbars are elements that hold content visible in non-collapsed states of navbars. As your users' page size decreases, these areas become invisible and can be accessed within the collapse area of navbars, another component which we will explain later in this page.

To create a content area, add a division with the .jtbNavbar-content class within your .jtbNavbar element.

Content

                    <!-- Navbar with content -->
<div class='jtbNavbar'>
    <div class='jtbNavbar-header'>...</div>
    <div class='jtbNavbar-content'>Content</div>
</div>

There is no defined limit for the number of content areas that can stay in the navbar, so you can add as many as you like.

Content Area 1

Content Area 2

Content Area 3

                    <!-- Navbar with multiple content areas -->
<div class='jtbNavbar'>
    <div class='jtbNavbar-header'>...</div>
    <div class='jtbNavbar-content'><span>Content Area 1</span></div>
    <div class='jtbNavbar-content'><span>Content Area 2</span></div>
    <div class='jtbNavbar-content'><span>Content Area 3</span></div>
</div>

As you can see from the examples above, by default, content areas in navbars expand theirselves to occupy all available space. Additionally, their display types are set to inline-flex, creating a versatile opportunity to handle their contents as flex items. Basing on these information, for poisitoning their items inside container, you can easily set their justify-items attribute externally or utilize one of their pre-defined positioning classes which are available in JTB_MD.

.jtbNavbar-content-start: Packs items toward the start of the content area.
.jtbNavbar-content-center: Centers items along the line.
.jtbNavbar-content-end: Packs items toward the end of the content area.
.jtbNavbar-content-between: Evenly distributes items in the line, with no spaces on either end.
.jtbNavbar-content-around: Evenly distributes items in the line, with half-size spaces on either end.
.jtbNavbar-content-evenly: Evenly distributes items in the alignment container, with full-size spaces on either end.

These classes do not position your content area itself. They position the elements inside the content area.

Start Start Start

Center Center Center

End End End

Between Between Between

Around Around Around

Evenly Evenly Evenly

                    <!-- Example content positioning - start -->
<div class='jtbNavbar'>
	<div class='jtbNavbar-content jtbNavbar-content-start'>
        <a href='...'>Start</a>
        <a href='...'>Start</a>
        <a href='...'>Start</a>
	</div>
</div>

Toggle Button

Toggle buttons on navbars are elements used to switch the states of collapsible areas. They are only visible on screens smaller than 992px. When clicked, they toggle the collapsible areas, which display the contents defined explicitly or originating from the content areas of the navbar.

To include a toggle button into your navbar, there's no need to perform any special actions. The jtbNavbar plugin automatically detects whether the navbar has content area(s) and generates the corresponding toggling button accordingly.

Resize your browser to see the toggle button!

                    <!-- Content areas automatically generates toggle button. -->
<div class='jtbNavbar'>
    <div class='jtbNavbar-header'>...</div>
    <div class='jtbNavbar-content'>...</div>
</div>

In addition to the previous information, to position your toggle button on the left side of your navbar, you can achieve this by adding the togglePos='left' attribute to your .jtbNavbar element.

In this navbar, the toggle button will be on left.

                    <!-- Toggle button on the left -->
<div class='jtbNavbar' togglePos='left'>
    <div class='jtbNavbar-content'>...</div>
    <div class='jtbNavbar-header'>...</div>
</div>

Collapse Area

Like toggle buttons, collapse areas are automatically generated elements via the jtbNavbar plugin. Once you add your 'content' areas into your navbars, the plugin checks their contents and consolidates the items inside them into a new division that is visible on smaller screens only.

With the toggle buttons, you can expand the collapse areas and shrink them to make them visible or invisible in your viewports.

Resize your browser to check out collapse area.

                    <!-- Collapse areas are automatically generated divisions by jtbNavbar plugin -->
<div class='jtbNavbar'>
    <div class='jtbNavbar-header'>...</div>
    <div class='jtbNavbar-content'>...</div>
</div>

To position your collapse area at the top of your navbar instead of the bottom, you can achieve this by adding the .jtbNavbar-dropup class to your .jtbNavbar element in your code.

Resize your browser to check out collapse area.

                    <!-- Collapse area on top -->
<div class='jtbNavbar jtbNavbar-dropup'>
    <div class='jtbNavbar-header'>...</div>
    <div class='jtbNavbar-content'>...</div>
</div>

If you prefer not to use the auto-generated version of collapse areas and want to customize them manually, you can create a division inside your navbar with the class .jtbNavbar-collapse and customize it according to your needs. If the plugin detects that there is already a collapse area defined in your navbar, it does not try to create a new one.

Resize your browser to see different collapse area.

This works!

                    <!-- Customized collapse area for additional content -->
<div class='jtbNavbar '>
    <div class='jtbNavbar-header'>...</div>
    <div class='jtbNavbar-content'>...</div>
    <div class='jtbNavbar-collapse'>
        <span>This works!</span>
    </div>
</div>

Positioning Components

In JTB_MD, navbar elements have inline-flex as their display properties, so to position your elements you can simply add your items as the way you position your flex containers. However, while doing so, it's essential to keep two core principles in mind:

'Content' items expand themselves if possible.
'Header' items use the required area for their children and do not expand themselves.

Once you understand these two principles, you can arrange your items in an order that suits your needs.

For example, if you want to create a navbar with one header on the left and one content area on the right (justifying items at the end), you can achieve this as follows:

Link1 Link2 Link3

                <!-- Navbar with header on left, content right with (elign end) -->
<div class='jtbNavbar'>
    <div class='jtbNavbar-header'>...</div>
    <div class='jtbNavbar-content jtbNavbar-content-end'>
        <a href='...'>Link1</a>
        <a href='...'>Link2</a>
        <a href='...'>Link3</a>
    </div>
</div>

Or if you want to create a navbar that has header in the middle and contents on both side, you can do it like this:

Link1 Link2 Link3

Link4 Link5 Link6

                <!-- Navbar with header in the middle contents on both side packed toward header -->
<div class='jtbNavbar-content jtbNavbar-content-end'>
    <a href='...'>Link1</a>
    <a href='...'>Link2</a>
    <a href='...'>Link3</a>
</div>
<div class='jtbNavbar-header'>...</div>
<div class='jtbNavbar-content jtbNavbar-content-start'>
    <a href='...'>Link4</a>
    <a href='...'>Link5</a>
    <a href='...'>Link6</a>
</div>

While there could be more examples to illustrate various positioning options for navbars, we refrain from providing unnecessary examples here. All navbars follow the same principles we've outlined earlier, making it possible for you to create a navbar of your choice.

Supported Content

There are no restrictions on the content that can be used in navbars in JTB_MD. The library has been designed with the goal of automatically making all elements added to the navbar 'navbar compatible'. However, it's essential to use elements that align with the philosophy of the navigation areas. (Avoid using carousels, dividers, etc.)

Special Types

In JTB_MD, besides the default one, which is an ordinary DOM element, there are three different types of navbars. To set the type simply apply the related class into your .jtbNavbar element.

.jtbNavbar-fixed-top A navbar that is pinned to the top of the viewport. This type of navbar will always be visible at the top of your screen regardless of scrolling.
.jtbNavbar-fixed-bottom A navbar that is pinned to the bottom of the viewport. Similar to fixed to top, this type of navbar will always be visible at the top of your screen regardless of scrolling.
.jtbNavbar-sticky A navbar that is pinned to the top of your viewport on scroll, but not by default. This type of navbar will always be visible in your viewport, but its position changes depending on scrolling behavior. (Note: To achieve the desired scrolling behavior, carefully define the 'relative' element in your DOM.)

Sizes

In JTB_MD, you can also resize your navbar elements via adding simple classes. To make your navbars larger or smaller than the default, simply apply the relevant size-class to your navbar element.

.jtbNavbar-[ xs | sm | md | lg | xl ]

This is navbar xs

This is navbar sm

This is navbar md

This is navbar lg

This is navbar xl

                            <!-- Example sized jtbAlert (size = xs) -->
<div class='jtbAlert jtbAlert-xs'>...</div>