1. Navbars
  2. Navbar

Components

Tailwind CSS Navbar - Preline UI

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

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

Group and hide navbar contents by a parent breakpoint.

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

Collapse with animation

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.

Requires JS

With mega menu

You can also use mega menu in your navbar.

Check out the full documentation on mega menu.

Color variants

Theming the navbar with utility classes.