0Pricing
Tailwind CSS Academy · Урок

Создание адаптивной панели навигации

Создайте горизонтальную панель навигации с логотипом, ссылками и CTA, которая на мобильных устройствах сворачивается в меню-гамбургер с помощью адаптивных utility-классов hidden и flex.

«Создание адаптивной панели навигации» — бесплатный урок Tailwind CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Tailwind CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Tailwind CSS Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Anatomy of a Navbar

A navigation bar (navbar) sits at the top of a page and typically contains a logo on the left, navigation links in the center or right, and a call-to-action button at the far right. On mobile, the links collapse into a hamburger menu to save space.

The navbar shell uses flex items-center justify-between to distribute these three zones horizontally, with px-6 py-4 for comfortable padding.

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
  <!-- Logo -->
  <a href="/" class="text-xl font-bold text-blue-600">Brand</a>
  <!-- Nav links (hidden on mobile) -->
  <div class="hidden md:flex items-center gap-6">...</div>
  <!-- CTA -->
  <button class="hidden md:block px-4 py-2 bg-blue-600 text-white rounded-lg">Sign Up</button>
</nav>

Logo and Brand Area

The logo area is typically an anchor tag wrapping either an SVG logo or a text-based brand name. Use flex items-center gap-2 if combining an icon and text, so they align vertically.

Keep the logo font bold and use your brand's primary color: font-bold text-xl text-blue-600. Make the anchor keyboard-focusable with a focus:outline-none focus-visible:ring-2 focus style.

<a href="/" class="flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded">
  <svg class="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
  </svg>
  <span class="text-xl font-bold text-gray-900">Launchpad</span>
</a>

Desktop Navigation Links

The desktop nav links sit inside a hidden md:flex items-center gap-6 wrapper — invisible on small screens and displayed as a flex row on medium screens and above. Each link uses text-sm font-medium text-gray-600 hover:text-gray-900 for a subtle default style that darkens on hover.

Add transition-colors duration-150 for a smooth color change on hover, and use a different text color or underline to indicate the currently active page.

<div class="hidden md:flex items-center gap-6">
  <a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Features</a>
  <a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Pricing</a>
  <a href="/blog" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Blog</a>
  <a href="/about" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">About</a>
</div>

Desktop CTA and Login Button

The right side of the navbar typically holds a ghost Sign in link and a solid Sign up button. Wrapping them in hidden md:flex items-center gap-3 keeps them hidden on mobile and aligned on desktop.

Using both buttons together creates a clear hierarchy: the ghost link for returning users and the solid button for new user acquisition.

<div class="hidden md:flex items-center gap-3">
  <a href="/login" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Sign in
  </a>
  <a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
    Get Started
  </a>
</div>

Hamburger Menu Button

On mobile, a hamburger button replaces the desktop links. Show it only on small screens with md:hidden and give it an accessible aria-label="Open menu" attribute.

The button renders three horizontal lines (a classic hamburger icon) using an SVG. When clicked, JavaScript toggles a class to reveal the mobile menu panel. The button itself uses p-2 text-gray-600 hover:bg-gray-100 rounded-md for a comfortable tap area.

<button
  id="menu-btn"
  aria-label="Open menu"
  class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
  onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
  <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
  </svg>
</button>

Mobile Menu Panel

The mobile menu is a full-width panel that appears below the navbar when the hamburger button is pressed. It is hidden by default with the hidden class, which JavaScript removes when the button is clicked.

Stack the links vertically with flex flex-col gap-1 px-4 pb-4 and give each link block py-2 text-base font-medium for a large, thumb-friendly tap target.

<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100">
  <div class="flex flex-col gap-1 px-4 pb-4 pt-2">
    <a href="/features" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Features</a>
    <a href="/pricing" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Pricing</a>
    <a href="/blog" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Blog</a>
    <a href="/about" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">About</a>
    <a href="/signup" class="mt-2 block py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">
      Get Started
    </a>
  </div>
</div>

Putting the Full Navbar Together

Assemble all parts into a single <nav> element. The structure is: wrapper nav with shadow, then inside it a max-width container with three zones — logo, desktop links, and desktop CTA — followed by the full-width mobile menu panel outside the container.

The max-w-7xl mx-auto inner wrapper prevents the navbar content from stretching too wide on large monitors while letting the background extend edge to edge.

<nav class="bg-white shadow-sm">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="text-xl font-bold text-blue-600">Brand</a>
    <div class="hidden md:flex items-center gap-6">
      <a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900">Features</a>
      <a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900">Pricing</a>
    </div>
    <div class="hidden md:flex items-center gap-3">
      <a href="/login" class="text-sm text-gray-600">Sign in</a>
      <a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
    </div>
    <button class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
            onclick="document.getElementById('mob').classList.toggle('hidden')">
      <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>
  </div>
  <div id="mob" class="hidden md:hidden px-6 pb-4 flex flex-col gap-1">
    <a href="/features" class="py-2 text-base font-medium text-gray-700">Features</a>
    <a href="/pricing" class="py-2 text-base font-medium text-gray-700">Pricing</a>
    <a href="/signup" class="mt-2 py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
  </div>
</nav>

Active Link Indicator

An active link indicator shows users which page they are currently on. A common pattern is to use a bottom border or text color change. Apply text-blue-600 border-b-2 border-blue-600 pb-0.5 to the active link so it stands out from the gray links.

In server-rendered apps, add the active classes conditionally on the server. In JS frameworks, compare the current route to the link href and apply the classes programmatically.

<div class="hidden md:flex items-center gap-6">
  <!-- Active link -->
  <a href="/features"
     class="text-sm font-medium text-blue-600 border-b-2 border-blue-600 pb-0.5">
    Features
  </a>
  <!-- Inactive links -->
  <a href="/pricing"
     class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Pricing
  </a>
  <a href="/blog"
     class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Blog
  </a>
</div>

Navbar With Search Input

Adding a search field to the navbar is a common requirement for content-heavy sites. Place the search input in the center of the navbar using flex-1 max-w-md mx-8 to give it flexible width while keeping it proportional.

Style the input with w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 for a clean search bar with a focus ring.

<div class="flex-1 max-w-md mx-8">
  <div class="relative">
    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
         fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/>
    </svg>
    <input
      type="search"
      placeholder="Search..."
      class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full
             bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
  </div>
</div>

Dropdown Nav Item

A dropdown navigation item reveals a submenu when hovered or clicked. Use the group utility on the parent link and group-hover:block on the initially hidden submenu to implement a pure CSS hover dropdown.

Position the dropdown with absolute top-full left-0 mt-1 to place it just below the parent link. Add min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 to give it a proper panel appearance.

<div class="relative group">
  <button class="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900">
    Products
    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </button>
  <div class="hidden group-hover:block absolute top-full left-0 mt-1 min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 py-1">
    <a href="/analytics" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Analytics</a>
    <a href="/reporting" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Reporting</a>
    <a href="/export" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Export</a>
  </div>
</div>

Dark Navbar Variant

A dark navbar uses a dark background like bg-gray-900 with light text. Switch text-gray-600 to text-gray-300 for links, hover:text-white for hover states, and adjust the button to bg-blue-500 since it needs to stand out against the dark background.

Dark navbars are popular for developer tools, SaaS dashboards, and any product targeting a technical audience.

<nav class="bg-gray-900 shadow-lg">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="text-xl font-bold text-white">DevTool</a>
    <div class="hidden md:flex items-center gap-6">
      <a href="/docs" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Docs</a>
      <a href="/api" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">API</a>
      <a href="/pricing" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Pricing</a>
    </div>
    <a href="/dashboard" class="px-4 py-2 text-sm font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-400">
      Dashboard
    </a>
  </div>
</nav>

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

Lesson Recap

In this lesson you learned: responsive navbar structure with a three-zone flex layout (logo, links, CTA); hamburger button and mobile menu panel toggled with JavaScript and hidden on desktop using md:hidden; and desktop link visibility controlled with hidden md:flex so links collapse on mobile and expand on larger screens. Next up we make navigation sticky and fixed.

Часто задаваемые вопросы

Урок «Создание адаптивной панели навигации» бесплатный?

Да — полный текст урока «Создание адаптивной панели навигации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Tailwind CSS Academy, подпишись на CoddyKit PRO. Курс Tailwind CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Создание адаптивной панели навигации»?

Создайте горизонтальную панель навигации с логотипом, ссылками и CTA, которая на мобильных устройствах сворачивается в меню-гамбургер с помощью адаптивных utility-классов hidden и flex. Ты практикуешь Tailwind CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Tailwind CSS Academy?

Предыдущий опыт не требуется. Tailwind CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Создание адаптивной панели навигации»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Tailwind CSS Academy?

Да. Каждый урок Tailwind CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Создание адаптивной панели навигации
  2. Фиксированная и закреплённая навигация
  3. Макет с вертикальной боковой панелью
  4. Сворачиваемая боковая панель для мобильных устройств
← Назад к Tailwind CSS Academy