메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.1
Theme

Navbar 구성 요소

브랜드, 탐색 링크 및 작업 슬롯이 포함된 CSS 전용 Tailwind CSS 탐색 모음입니다. 끈적하고 투명한 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

Navbar components display horizontal navigation lists for site structure and user navigation. Built with semantic HTML nav and list elements, the Frutjam navbar system supports multiple layouts, responsive behavior, and nested menu integration. Accessible and keyboard-navigable, navbars are ideal for main site navigation, breadcrumbs, and tab interfaces.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

Class 타입 Description
navbarBaseHorizontal navigation bar container
navbar-listModifierHorizontal list of navigation links
navbar-startModifierLeft slot for logo or first nav group
navbar-centerModifierCenter slot for main navigation
navbar-endModifierRight slot for actions and controls
navbar-topModifierPositions navbar at the top of the viewport
navbar-middleModifierVertically centered within a parent
navbar-bottomModifierPositions navbar at the bottom of the viewport

Navbar

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav className="navbar">
  <ul className="navbar-list gap-x-6">
    <li>
      <a className="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a className="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a className="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Navbar Placements

The navbar component is by default positioned at the start (left in LTR). Use navbar-start, navbar-center, or navbar-end for horizontal alignment, and navbar-top, navbar-middle, or navbar-bottom for vertical alignment. Placement is RTL-friendly.

Use horizontal placement classes for aligning the navbar list along the X-axis, and vertical placement classes when the navbar has a custom height.

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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar navbar-start">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Horizontally align to the center

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar navbar-center">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Horizontally align to the right (end)

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar navbar-end">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar navbar-top h-56">
  <ul class="navbar-list">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Vertically align to the center

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar navbar-middle h-56">
  <ul class="navbar-list">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Vertically align to the bottom (end)

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar navbar-bottom h-56">
  <ul class="navbar-list">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>