--- title: "Menu" type: component version: "2.2.2" doc_version: "2.7.3" status: stable date: 2026-07-05 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Tailwind CSS Menu for navigation lists, sidebars, and dropdowns. Icons, active states, and nested submenus—fully accessible without JavaScript." url: https://frutjam.com/pl/components/menu --- # Menu Component Składniki menu wyświetlają zorganizowane listy działań lub opcji nawigacji. Zbudowany z semantycznych list HTML i elementów łączy, system menu Frutjam obsługuje układy pionowe i poziome, menu zagnieżdżone, ikony i stany aktywne. W pełni dostępne dzięki nawigacji za pomocą klawiatury menu płynnie integrują się z listami rozwijanymi, paskami bocznymi i wzorcami nawigacji kontekstowej. Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem. | Klasa | Typ | Opis | | --------------- | ----------- | --------------------------------------------- | | menu | Opierać | Pionowa lista elementów nawigacji lub działań | | menu-item | Modyfikator | Indywidualna, klikalna pozycja w menu | | menu-title | Modyfikator | Etykieta sekcji nieinteraktywnej | | menu-horizontal | Modyfikator | Układ poziomy | | menu-vertical | Modyfikator | Układ pionowy (domyślny) | | menu-active | Modyfikator | Wymusza aktywny/podświetlony stan elementu | | menu-disabled | Modyfikator | Wyłączony wygląd elementu menu | | menu-xs | Rozmiar | Bardzo mały | | menu-sm | Rozmiar | Mały | | menu-md | Rozmiar | Średni (domyślny) | | menu-lg | Rozmiar | Duży | | menu-xl | Rozmiar | Bardzo duży | ## Podstawowe użycie ## Menu poziome ```html ``` ## Pionowe menu ```html ``` ## Menu z ikoną i tekstem ```html ``` ## Menu responsywne: pionowe na małym ekranie, poziome na dużym ekranie ```html ``` ## Rozmiary menu ```html ``` ## Menu z tytułem ```html ``` ## Menu z pionową linią z tytułem jako rodzicem ```html ``` ## Menu z wyłączonymi pozycjami ```html ``` ## Menu z aktywną pozycją ```html ``` ## Menu z podmenu ```html ``` ## Menu ze składanym podmenu ```html ``` ## Menu pionowe zawierające tylko ikonę ```html ``` ## Menu poziome zawierające wyłącznie ikonę ```html ``` ## Menu z ikoną, tylko z podpowiedzią ```html ``` ## Menu z samą ikoną (poziomo) z podpowiedzią ```html ``` ## Menu z ikonami i plakietką (responsywne) ```html ``` ## Drzewo plików ```html ``` ## Podmenu poziome ```html ``` ## Mega menu z podmenu (responsywne) ```html ``` ## Składane z podmenu (responsywne) ```html ```