---
title: "Pasek boczny"
type: component
version: "2.2.5"
doc_version: "2.7.22"
status: stable
date: 2026-07-13
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Pasek boczny CSS Tailwind ze składanymi panelami, ikonami i zagnieżdżonymi menu. Responsywna nawigacja na pulpicie nawigacyjnym dla układów administracyjnych i aplikacji wielosekcyjnych."
url: https://frutjam.com/pl/components/sidebar
---

# Komponent paska bocznego

Komponenty paska bocznego organizują główną nawigację i zawartość pomocniczą w stałym lub składanym panelu bocznym. Zbudowane w oparciu o semantyczny kod HTML, paski boczne usprawniają nawigację bez zajmowania przestrzeni głównej treści. System pasków bocznych Frutjam obsługuje wiele układów, szerokości i zachowań — idealnie nadaje się do pulpitów administracyjnych, witryn z dokumentacją i złożonych aplikacji.

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                                                  |
| ------- | ------- | ----------------------------------------------------- |
| sidebar | Opierać | Fixed side panel for navigation and auxiliary content |

## Podstawowe użycie

Use the `sidebar` class on an `aside` element. Place it alongside your main content in a flex container.

## Sidebar Navigation

A full navigation sidebar with grouped sections and active state styling.

```html
<div class="flex min-h-105">
  <aside class="sidebar w-64">
    <ul class="menu p-4">
      <li class="menu-title"><span>Dashboard</span></li>
      <li><a class="menu-item menu-item menu-active">Overview</a></li>
      <li><a class="menu-item">Analytics</a></li>
      <li class="menu-title mt-4"><span>Management</span></li>
      <li><a class="menu-item">Users</a></li>
      <li><a class="menu-item">Inventory</a></li>
      <li><a class="menu-item">Settings</a></li>
    </ul>
  </aside>
  <main class="flex-1 p-6">
    <h2 class="heading-2xl">Overview</h2>
    <p class="para-base mt-2">Page content goes here.</p>
  </main>
</div>
```

## Collapsible Sidebar

For mobile or overlay sidebars, combine the `sidebar` class with the `drawer drawer-start` dialog component.

```html
<button type="button" class="btn btn-primary btn-sm" onclick="sidebarDrawer.show()">Open Sidebar</button>

<dialog class="drawer drawer-start" id="sidebarDrawer">
  <div class="drawer-content">
    <aside class="sidebar h-full w-64">
      <ul class="menu p-4">
        <li class="menu-title"><span>Dashboard</span></li>
        <li><a class="menu-item">Home</a></li>
        <li><a class="menu-item">Profile</a></li>
        <li><a class="menu-item">Settings</a></li>
        <li><a class="menu-item">Logout</a></li>
      </ul>
    </aside>
  </div>
  <button type="button" class="drawer-backdrop" onclick="sidebarDrawer.close()">Close Sidebar via Backdrop</button>
</dialog>
```