Getting Started
Layout
Components
Design
Navbar
In the context of web development, a navbar (short for "navigation bar") is a horizontal or vertical barthat is displayed at the top or side of a web page. It is used to display links or buttons that allow users to navigate to different sections or pages of the website.
<nav class="null-navbar-container">
<div class="null-container">
<div class="null-navbar null-display-flex null-align-items-center null-justify-content-center">
<div class="null-navbar-logo">
<a href="javascript:void(null)">
<img src="" alt="" />
</a>
</div><!--End null-navbar-logo-->
<ul class="null-navbar-links">
<!-- Mobile-->
<ul class="null-navbar-links-mobile null-text-align-center">
<li>
<a href="javascript:void(null)">
<img src="" alt=""/>
</a>
</li>
<li class="null-text-align-center">Slogan or a brief description</li>
<li class="null-navbar-links-mobile-line"></li>
</ul><!--null-navbar-links-mobile-->
<!-- Mobile-->
<li><a class="null-navbar-link" href="javascript:void(null)"> Home</a></li>
<li class="null-dropdown-container">
<a class="null-dropdown-button null-cursor-pointer">
<span>Dropdown title</span>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a><!--End null-dropdown-button-->
<ul class='null-dropdown'>
<ul class="null-dropdown-menu">
<li class="null-padding-10">
<a href="javascript:void(null)">Link 1</a>
</li><!--End null-padding-10-->
<li class="null-padding-10">
<a href="javascript:void(null)">Link 2</a>
</li><!--End null-padding-10-->
<li class="null-padding-10">
<a href="javascript:void(null)">Link 3</a>
</li><!--End null-padding-10-->
<li class="null-padding-10">
<a href="javascript:void(null)">Link 4</a>
</li><!--End null-padding-10-->
</ul> <!--End null-drop-down-menu-->
</ul> <!--End null-drop-down-menu-container-->
</li> <!--End null-drop-down-->
<li><a class="null-navbar-link" href="javascript:void(null)"> Single Link 1 </a></li>
<li><a class="null-navbar-link" href="javascript:void(null)"> Single Link 2 </a></li>
<!--Desktop and Mobile -->
</ul><!--End null-navbar-links-->
<div class="null-navbar-search-container null-display-flex null-align-items-center null-justify-content-space-around">
<div class="null-navbar-search null-color-main null-cursor-pointer">
<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div><!--End null-navbar-search-->
</div> <!-- End null-navbar-search-container-->
<div class="null-navbar-menu-icon-contianer null-box-shadow">
<svg class="null-navbar-menu-icon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path>
</svg>
</div><!--End null-navbar-menu-icon-contianer-->
</div><!--End null-navbar-->
<div class="null-navbar-form-container">
<form action="" method="" class="null-navbar-form">
<input type="text" class="null-navbar-form-input" name="search" placeholder="Search For Every Thing" />
<button class="null-navbar-form-button">Search</button>
</form> <!--End null-navbar-form-->
</div><!--End null-navbar-form-container-->
</div><!--null-container-->
</nav><!--End null-navbar-container-->The navigation bar on the mobile screen is designed to be displayed from the side. The below code snippet should be customized specifically for mobile and tablet screens, where you have the option to include additional information such as social media links and custom links.
<!-- Mobile -->
<ul class="null-navbar-links-mobile null-text-align-center">
<li>
<a href="javascript:void(null)">
<img src="" alt=""/>
</a>
</li>
<li class="null-text-align-center">Slogan or a brief description</li>
<li class="null-navbar-links-mobile-line"></li>
</ul><!--null-navbar-links-mobile-->
<!-- Mobile -->Want to highlight the currently active page in a navigation bar? When the user visits a page, you can make the corresponding navigation link appear in a different color, indicating that it is the active page. You can achieve this using the following JavaScript and CSS code:
const currentUrl = window.location.href.replace(/^(http|https):\/\//, ''); // get the current URL and remove the protocol part
const navLinks = document.querySelectorAll('.null-navbar-link'); // get all nav links
// loop through each nav link and check if its href matches the current URL
navLinks.forEach(link => {
const hrefWithoutParams = link.href.replace(/^(http|https):\/\//, '').replace(/\?.*/, '').toLowerCase(); // remove protocol and all query string params
const currentHrefWithoutParams = currentUrl.replace(/\?.*/, '').toLowerCase();
if (hrefWithoutParams === currentHrefWithoutParams) {
link.classList.add('active');
}
});.null-navbar-link.active { color:var(--null-color-main); }