Frutjam logoFrutjam
v1.10.1
Theme

Tailwind CSS Navbar Components

The Navbar component is divided into three sections—start, center, and end—that manage both vertical and horizontal alignment. It’s primarily used in headers and navigation drawers to organize navigation links and supports right-to-left (RTL) layouts.

html

The navbar component is by default positioned in the left side of the screen, but it can be placed depending upon the use case using utility classes such as navbar-x-{position} and navbar-y-{position}, where {position} is start, center, or end. Placement is designed with RTL and LTR compatibility in mind, making the navbar adaptable to different language directions and layouts.

Use navbar-x-{position} for horizontal placement and navbar-y-{position} for vertical placement, where {position} can be start, center, or end. These classes are applied to the navbar component.

Horizontal Placements

Control how the navbar-list sits along the X-axis. These are RTL-friendly (Start/End instead of Left/Right).

Horizontally align to the left (start)

html

Horizontally align to the center

html

Horizontally align to the right (end)

html

Vertical Placements

Control the alignment along the Y-axis. This is particularly useful when the navbar has a custom height.

Vertically align to the top (start)

html

Vertically align to the center

html

Vertically align to the bottom (end)

html