1. Components
  2. Navbar

Navigations

Tailwind CSS Navbar

Documentation and examples for Preline UI's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more.

Basic usage

Example

A basic form of the navbar.

Responsive behaviors

With horizontal scroll

Here's an example of a navbar that is horizontally scrollable at the sm (small) breakpoint.

Resize the example to see it in action.

With collapse

Requires JS

Note that this component requires the use of our Collapse plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

Group and hide navbar contents by a parent breakpoint.

Here's an example of a navbar that automatically collapses at the sm (small) breakpoint.

Brand

SVG

You can replace the text within the navbar with an <svg>.

SVG and text

You can also make use of some additional utilities to add an svg and text at the same time.

Image

You can replace the text within the navbar with an <img>.

Image and text

You can also make use of some additional utilities to add an image and text at the same time.

Alignment

Left aligned navbar.

Center aligned navbar.

With dropdown

Requires JS

Note that this component requires the use of our Dropdown plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

You can also use mega menu in your navbar.

Color variants

Theming the navbar with utility classes.