Nawigacja to pierwsza rzecz, którą widzi odwiedzający Twoją stronę.
Powinna być szybka, czytelna na każdym urządzeniu i dostępna dla każdego użytkownika — również tych korzystających z czytników ekranu czy nawigacji klawiaturą. W tym artykule pokazuję, jak działa particle menu Bootstrap 5.3 dla Gantry 5 i co zyskujesz dzięki niej w porównaniu do standardowej nawigacji.
Czym jest particle menu?
Gantry 5 to framework do budowania szablonów Joomla. Zarządzanie layoutem strony odbywa się w nim przez tzw. particles — konfigurowalne bloki treści, które przeciągasz i upuszczasz w edytorze wizualnym.
Particle menu to blok nawigacji. W odróżnieniu od standardowej particle Gantry, ta wersja zbudowana jest na Bootstrap 5.3 — najnowszej wersji popularnego frameworka CSS, z którego korzysta sam Joomla. Dzięki temu nawigacja wygląda nowocześnie, responsywnie i jest w pełni dostępna.
Wszystkie opcje particle — kolory, czcionki, tryb sticky, logo — ustawiasz z poziomu panelu administracyjnego Gantry. Bez edycji kodu.
Co zyskujesz?
📱 Offcanvas na mobile
Na telefonach i tabletach menu chowa się w wysuwanym panelu bocznym (offcanvas). Otwierasz go przyciskiem hamburger — całe menu mieści się w przejrzystej liście, podmenu rozwijają się płynnie wewnątrz panelu.
📌 Sticky menu
Nawigacja może być przyklejona do góry strony podczas scrollowania. Do wyboru trzy tryby: zawsze widoczna, przyklejona po przewinięciu, lub chowana przy scrollowaniu w dół — pojawiająca się gdy scrollujesz w górę.
🔤 Własna typografia
Font, rozmiar, grubość, odstępy liter, transformacja tekstu — wszystko ustawiasz z panelu. Możesz załadować dowolny font z Google Fonts bez żadnych wtyczek.
🖼️ Dwa loga
Możesz ustawić osobne logo dla desktop i dla mobile. Logo może też zmniejszać się przy scrollowaniu — płynna animacja CSS, którą włączasz jednym przełącznikiem.
🎨 Pełna kontrola kolorów
Kolory linków, hover, tła dropdown, tła offcanvas, koloru po przescrollowaniu — każdy element ma osobne ustawienie w panelu. Domyślne wartości pobierane są z ustawień stylu szablonu Gantry.
🔗 Social media
Ikony mediów społecznościowych możesz dodać zarówno do paska nawigacyjnego na desktop, jak i do panelu offcanvas na mobile. Każdy link konfigurowany z panelu.
Dostępność (accessibility) — dlaczego to ważne?
Dostępność strony internetowej oznacza, że mogą z niej korzystać wszyscy użytkownicy — w tym osoby z niepełnosprawnościami, korzystające z czytników ekranu (np. niewidome), nawigujące wyłącznie klawiaturą, lub korzystające z asystentów głosowych.
W Polsce od 2024 roku dostępność cyfrowa jest wymagana prawnie dla podmiotów publicznych. Dla prywatnych firm staje się standardem — i wpływa na pozycjonowanie w Google.
Particle menu spełnia kluczowe wymogi dostępności:
- Aria labels — przyciski hamburger i zamknij mają opisy dla czytników ekranu ("Otwórz menu", "Zamknij menu")
- aria-current="page" — aktywny element menu jest oznaczony dla technologii asystujących
- aria-expanded — czytnik ekranu informuje czy podmenu jest otwarte czy zamknięte
- Tytuł offcanvas — panel mobilny ma ukryty wizualnie nagłówek wymagany przez standard Bootstrap accessibility
- Nawigacja klawiaturą — dropdown i offcanvas obsługują Tab i Escape
Klient prowadzący serwis informacyjny potrzebował nawigacji zgodnej z wymogami WCAG 2.1 AA. Standardowa particle Gantry nie spełniała wszystkich wymagań — brakowało odpowiednich atrybutów aria. Własna particle z Bootstrap 5.3 rozwiązała problem i przy okazji dodała sticky menu oraz nową typografię bez zmian w szablonie.
Jak to działa pod spodem?
Dla zainteresowanych — kilka słów o technikaliach bez zagłębiania się w kod:
Bootstrap 5.3 z Joomla — Joomla 5+ dostarcza Bootstrap 5.3 we własnym katalogu. Particle korzysta z tej samej biblioteki co Joomla, bez ładowania jej po raz drugi z zewnętrznego CDN. To szybciej i bezpieczniej.
Zero zewnętrznych zasobów — fonty z Google Fonts ładowane są tylko gdy je skonfigurujesz. Jeśli nie ustawiasz custom fontu, żadne zewnętrzne zapytania nie są wysyłane.
Szybkość ładowania — logo ma ustawiony priorytet ładowania (fetchpriority="high"), co poprawia wynik LCP (Largest Contentful Paint) — jeden z kluczowych wskaźników Core Web Vitals branych pod uwagę przez Google.
Podmenu wielopoziomowe — particle obsługuje zagnieżdżone podmenu, separatory i nagłówki sekcji bezpośrednio z menedżera menu Joomla. Nie trzeba niczego dodatkowo konfigurować.
Podsumowanie
Particle menu Bootstrap 5.3 dla Gantry 5 to gotowe rozwiązanie dla stron Joomla, które potrzebują nowoczesnej, dostępnej nawigacji z pełną konfiguracją z panelu admina. Nie wymaga edycji kodu — działa od razu po wgraniu do szablonu.
Kod dostępny na GitHub: github.com/pablop76/particlesgantry
Potrzebujesz dostępnej nawigacji na swojej stronie Joomla?
Chętnie pomogę wdrożyć rozwiązanie dopasowane do Twojego szablonu i wymagań.