Notus Design System PRO by Creative Tim

Navbar

This is the Navbar tag. It only adds some nice styles for wrapper component/tag.

Copied

<div class="w-full">
    <nav class="w-full flex flex-wrap items-center justify-between px-2 py-3 mb-3 bg-pink-500 text-white"></nav>
 </div>

Navbar Brand

This is the NavbarBrand tag. You can used it inside the NavbarContainer..

Copied

Creative Tim

<div class="w-full"><a href="javascript:;" class="text-sm font-bold leading-relaxed inline-flex items-center mr-4 py-2 whitespace-nowrap uppercase text-white text-blueGray-800">Creative Tim</a></div>

Navbar Button

This is the NavbarButton tag. You can used it inside the NavbarContainer to make the NavbarCollapse open on small devices. We've added a style of display block important so that you may see it.

Copied

<div class="w-full"><button class="ml-auto cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-blueGray-400 rounded bg-transparent block outline-none focus:outline-none text-blueGray-300 xl:hidden">Open</button></div>

Navbar Collapse

This is the NavbarCollapse tag. You can used it inside the NavbarContainer.

Copied

Creative Tim

<div class="w-full">
    <div class="items-center w-full flex-grow overflow-hidden duration-300 transition-all ease-in-out md:flex md:w-auto">Creative Tim</div>
 </div>

Navbar Container

This is the NavbarContainer tag. This adds a nice width for your navbar on large screens.

Copied

Creative Tim

<div class="w-full">
    <div breakpoint="md" class="container mx-auto flex flex-wrap items-center justify-between px-0 lg:px-4">Creative Tim</div>
 </div>

Navbar List

This is the NavbarList tag. This is the wrapper for the list items.

Copied

Creative Tim

<div class="w-full">
    <ul class="flex flex-wrap list-none pl-0 mb-0 list-none pl-0 mb-0 flex flex-col md:items-center md:flex-row">Creative Tim</ul>
 </div>

Navbar List Item

This is the NavbarListItem tag. This is the wrapper for the list link.

Copied

Creative Tim

Navbar List Link

This is the NavbarListLink tag. This is the link from inside your navbar list.

Copied

Creative Tim

<div class="w-full"><a class="hover:opacity-75 px-3 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-white py-4 md:py-2">Creative Tim</a></div>

Navbar Example

And here is a full example with all of the above. As you can see, now it makes more sense.

Copied

<div class="w-full">
    <nav class="w-full flex flex-wrap items-center justify-between px-2 py-3 mb-3 bg-pink-500">
       <div class="container mx-auto flex flex-wrap items-center justify-between px-0 lg:px-4">
          <a class="text-sm font-bold leading-relaxed inline-flex items-center mr-4 py-2 whitespace-nowrap uppercase text-white" href="#/">Notus Design System PRO</a><button class="ml-auto cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-blueGray-400 rounded bg-transparent block outline-none focus:outline-none text-blueGray-300 md:hidden"><i class="fas fa-bars"></i></button>
          <div class="items-center w-full flex-grow overflow-hidden duration-300 transition-all ease-in-out md:flex md:w-auto">
             <ul class="flex flex-wrap list-none pl-0 mb-0 list-none pl-0 mb-0 flex flex-col md:items-center md:flex-row md:mr-auto">
                <li class=""><a class="hover:opacity-75 px-3 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-white" href="#/">Left Link 1</a><a href="javascript:;" class="hover:opacity-75 px-3 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-white">Left Link 2</a></li>
             </ul>
             <ul class="flex flex-wrap list-none pl-0 mb-0 list-none pl-0 mb-0 flex flex-col md:items-center md:flex-row md:ml-auto"><a class="hover:opacity-75 px-3 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-white" href="#/">Right Link 1</a><a href="javascript:;" class="hover:opacity-75 px-3 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-white">Right Link 2</a></ul>
          </div>
       </div>
    </nav>
 </div>

PresentationBlocks

Navbar

Navbar

Navbar Brand

Navbar Button

Navbar Collapse

Navbar Container

Navbar List

Navbar List Item

Navbar List Link

Navbar Example