Bootstrap Navigation Bar
Navigation bar is navigation header that always placed at the top of your webpage. When a web designer design website then they always need navigation in their website. Bootstrap provide best solution to create navigation bar. With Bootstrap navigation bar can be extend or collapse its all up to depend on your screen size.Simple Basic Navbar
Navigation bar created with class .navbar and then add responsive collapsing class .navbar-expand-xl,lg,md or sm depend on the screen size.To add link inside navbar we have to use <ul> and <li> html element. In <ul> element add class .navbar-nav and then add .nav-item in <li> element followed by anchor tag <a> with class .nav-link.
Example:-
<nav class="navbar navbar-expand-md bg-light"><ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</nav>
Vertical Navigation bar
If you want to create vertical navigation bar then just remove .navbar-expand class.Example:-
<nav class="navbar bg-light"><ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</nav>
Background Color Navigation Bar
You can add background color in your navigation bar because without color its dont look that much good. To add background color just add bootstrap classes .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light according your requirement.Example:-
<nav class="navbar navbar-expand-md bg-info navbar-dark"><ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</nav>
I am giving only one example rest you can try by changing .bg-info class into other classes.
Add Brand / Logo in Navbar
You always need to add your brand name or Logo. To add your brand name just add .navbar-brand class inside separate <a> element.Example:-
<nav class="navbar navbar-expand-md bg-primary navbar-dark"><a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</nav>
Collapsing The Navigation Bar
Most of time we need collapsing navigation especially on small screen size, if you want your navigation bar should be hide on small screen then you have to use collapsing navigation.To create collapsible navigation bar you have to use button with class="navbar-toggle" and data-toggle="collapse" and then set data-target="#yourtarget".
Example:-
<nav class="navbar navbar-expand-md bg-dark navbar-dark"><!-- Brand -->
<a class="navbar-brand" href="#">Brand Logo</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu-1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu-2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu-3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu-3</a>
</li>
</ul>
</div>
</nav>
Navbar With Dropdown
If you want dropdown in navigation bar then you can create by following example.Example:-
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"><!-- Brand -->
<a class="navbar-brand" href="#">Brand Logo </a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu-1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu-2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item-1</a>
<a class="dropdown-item" href="#">Item-2</a>
<a class="dropdown-item" href="#">Item-3</a>
</div>
</li>
</ul>
</nav>
Forms and Button inside Navbar
You can create forms input type and button inside navigation bar.Example:-
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"><form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="your text">
<button class="btn btn-success" type="submit">Submit</button>
</form>
</nav>
Fixed Navigation Bar
Sometimes we need fixed navigation bar, create fixed navigation bar by following example.Example:-
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top"><!-- Brand -->
<a class="navbar-brand" href="#">Brand Logo </a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu-1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu-2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu-4</a>
</li>
</ul>
</nav>
No comments:
Post a Comment