NAVBARS

To create a navigation header for your design, the first step is creating an element with .jtbNavbar class.

How it works

  • Since every design comes with its own style, instead of creating one and single navbar design; we have created a dynamic one which you can manipulate itself depending on your needs!
  • The jtbNavbar system depends on flexbox idea. Once you have created, you can manipulate it with our jtbFlexSystem.

Usage

Before going to details, we need to clarify that everything starts with an element with .jtbNavbar class. Just create it and your navbar is ready to use!

Hello! I'm a navbar.
			Copy
			<div class='jtbNavbar'>
	Hello I'm a navbar.
</div>
		

Header

There are two crucial parts of the .jtbNavbar. One of them is the .jtbNavbarHeader part. This part includes the brand and other important stuff and won't collapse on extra small screens.

Header Position

It is possible to position your header area inside your .jtbNavbar. Just put the header element on the desired position.

Header

Header

Header
				Copy
				<!-- Left Aligned --> 
<div class='jtbNavbar'>
	<div class='jtbNavbarHeader'>Header</div>
	<div class='jtbNavbarCollapse'></div>
</div>

<!-- Centered -->
<div class='jtbNavbar'>
	<div class='jtbNavbarCollapse'></div>
	<div class='jtbNavbarHeader'>Header</div>
	<div class='jtbNavbarCollapse'></div>
</div>

<!-- Right Aligned -->
<div class='jtbNavbar'>
	<div class='jtbNavbarCollapse'></div>
	<div class='jtbNavbarHeader'>Header</div>
</div>

			

Brand

Once you define the desired position for your header, you can include your brand into it via .jtbNavbarBrand. It is possible to add anything as brand from images to texts. So chose wisely. :)

			Copy
			<div class='jtbNavbar'>
	<div class='jtbNavbarHeader'>
		<div class='jtbNavbarBrand'>
			<a href='#'><img src='...'></a>
		</div>
	</div>
	<div class='jtbNavbarCollapse'></div>
</div>
		

Collapsible area (Content)

Like the header, another crucial part of the .jtbNavbar is the collapsible area (content part). This part includes the links, actions or other related stuff. You can create it by adding an element with .jtbNavbarCollapse class.

Positioning

Like in the header part, it is possible to position the content of the collapsible area in jtbNavbar.

Collapsible
Header

Collapsible
Header
Collapsible

Header
Collapsible
				Copy
				<div class='jtbNavbar'>
	<div class='jtbNavbarCollapse'>Collapsible</div>
	<div class='jtbNavbarHeader'>Header</div>
</div>
<div class='jtbNavbar'>
	<div class='jtbNavbarCollapse'>Collapsible</div>
	<div class='jtbNavbarHeader'>Header</div>
	<div class='jtbNavbarCollapse'>Collapsible</div>
</div>
<div class='jtbNavbar'>
	<div class='jtbNavbarHeader'>Header</div>
	<div class='jtbNavbarCollapse'>Collapsible</div>
</div>
			

Content positioning

It is possible to align contents of the collapsible area, with the following classes: jtbNavbarCollapseLeft | jtbNavbarCollapseCenter | jtbNavbarCollapseRight

Collapsible
Header

Collapsible
Header

Collapsible
Header
				Copy
				<div class='jtbNavbar'>
	<div class='jtbNavbarCollapse jtbNavbarCollapseLeft'>Collapsible</div>
	<div class='jtbNavbarHeader'>Header</div>
</div>
<div class='jtbNavbar'>
	<div class='jtbNavbarCollapse jtbNavbarCollapseCenter'>Collapsible</div>
	<div class='jtbNavbarHeader'>Header</div>
</div>
<div class='jtbNavbar'>
	<div class='jtbNavbarCollapse jtbNavbarCollapseRight'>Collapsible</div>
	<div class='jtbNavbarHeader'>Header</div>
</div>
			

Contents

There are several options for the items you can use in jtbNavbar: one of them is links.

				Copy
				<div class='jtbNavbar'>
	<div class='jtbNavbarHeader'>
		<div class='jtbNavbarBrand'>
			<a href='#'><img src='...'></a>
		</div>
	</div>
	<div class='jtbNavbarCollapse jtbNavbarCollapseRight'>
		<ul>
			<li><a href='#'>Link</a></li>
			<li><a href='#'>Link</a></li>
		</ul>
	</div>
</div>
			

Another option is using text.

This is a text in jtbNavbar.
				Copy
				<div class='jtbNavbar'>
	<div class='jtbNavbarCollapse'>
		This is a text in jtbNavbar.
	</div>
</div>
			

You can use buttons in navbars too.

				Copy
				<div class='jtbNavbar'>
	<div class='jtbNavbarCollapse'>
		<button class='jtbButton jtbButton_sm jtbButtonRounded'>Button</button>
	</div>
</div>
			

Styling

We know all designs have their unique way to show navbars. So we add some special options for to the JTB_MD.

Sizing

There are 4 different sizes available for the .jtbNavbar. .jtbNavbar_lg | .jtbNavbar_md | .jtbNavbar_sm | .jtbNavbar_xs

Large Navbar

Medium Navbar

Small Navbar

Extra Small Navbar
				Copy
				<div class='jtbNavbar jtbNavbar_lg'>Large Navbar</div>
<div class='jtbNavbar jtbNavbar_md'>Medium Navbar</div>
<div class='jtbNavbar jtbNavbar_sm'>Small Navbar</div>
<div class='jtbNavbar jtbNavbar_xs'>Extra Small Navbar</div>
			

Transparency

If you want to make your navbar transparent background, it is also possible with .jtbNavbarTransparent class. Note that the transparent class also removes the box shadow of the navbar. So when you want to use it, be careful!

Transparent Navbar
				Copy
				<div class='jtbNavbar jtbNavbarTransparent'>Transparent Navbar</div>
			

Behaviours

Since creating navbar is not enough; there needs to be a positioning guide for it; we have created three different options for you. You can fix your navbar at the top of the screen with .jtbNavbarFixedTop, you can fix your navbar at the bottom of the screen with .jtbNavbarFixedBottom or you can make it placed in the page with .jtbNavbarStatic. Note that if you do not define the position of the navbar it will be act as static one.

			Copy
			<!-- Fixed To Top of the Screen-->
<div class='jtbNavbar jtbNavbarFixedTop'>...</div>

<!-- Fixed To Bottom of the Screen-->
<div class='jtbNavbar jtbNavbarFixedBottom'>...</div>

<!-- Static-->
<div class='jtbNavbar jtbNavbarStatic'>...</div>
		

Responsiveness

Since JTB_MD is a responsive design library, we defined our jtbNavbars responsive too. The most important things you need to know are:

  • .jtbNavbarCollapse is the area where all collapsible items needs to be in,
  • .jtbNavbarToggle is the the button where you can toggle the collapsed area,
  • All jtb JS files needs to properly included for toggling and collapse animations & structures.
once you got all of these, the ony step remaining is the usage.

			Copy
			<div class='jtbNavbar'>
	<div class='jtbNavbarToggle'><i class='jtb-arrow-down'></i></div>
	<div class='jtbNavbarCollapse jtbNavbarCollapseRight'>
		<ul>
			<li><a href='#'>Link 1</a></li>
			<li><a href='#'>Link 2</a></li>
		</ul>
	</div>
	<div class='jtbNavbarHeader'>
		<div class='jtbNavbarBrand'>
			<a href='#'><img src='...'></a>
		</div>
	</div>
	<div class='jtbNavbarCollapse jtbNavbarCollapseLeft'>
		<ul>
			<li><a href='#'>Link 1</a></li>
			<li><a href='#'>Link 2</a></li>
		</ul>
	</div>
</div>
		

If you want to change the position of the toggle button, you can use .jtbNavbarToggleRight | .jtbNavbarToggleLeft classes in your .jtbNavbarToggle item.

Javascript behaviour

Initializing

Javascript behaivours of jtbNAvbars has been written in navbar.js plugin of jtb_md.js. To avoid any problematic behaviour on navbars; do not remove this plugin manually.