# Navigáció (Beágyazható elemekkel) elem

> A beágyazható Navigáció elem: hierarchikus menü legördülő menükkel, többszintű működéssel és mobilmenüvel.

A **Navigáció (Beágyazható elemekkel)** elem hierarchikus navigációs menüt épít legördülő menükkel, többszintű (multilevel) működéssel és mobilbarát viselkedéssel. A menü elemei beágyazott elemek, ezért tetszőlegesen összetett menürendszer felépíthető. A legördülő részeket a [Legördülő menü](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-legordulo-menu/) elem adja.

![A Navigáció elem beállításai a szerkesztő bal oldali paneljén](./kepek/elemek-3-nav-nested.webp)

*A Navigáció elem beállításai a szerkesztő bal oldali paneljén* (https://minta-bolt.hu/elemek/?bricks=run)

A képen az **HTML-címke** és az **aria-label** mező látszik, alattuk a **Felső szint (tétel)**, a **Legördülő menü** és a **Mobilmenü** csoport. A jobb oldali **Szerkezet** panelen a navigáció, benne egy legördülő menü és egy szöveges hivatkozás látható.

A mobilmenü ki- és bekapcsolásához a **Navigációs tételek** után szúrj be egy **Kapcsoló** (Toggle) elemet.

## Alapbeállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **HTML-címke** | A navigáció HTML-címkéje. Dinamikus adat is használható, a szerkesztő ellenőrzi az érvényességét. | `nav` |
| **aria-label** | A navigáció akadálymentességi felirata. | Menü |

## Felső szint (tétel)

A legfelső szintű menüelemek beállításai.

| Beállítás | Mit csinál |
| --- | --- |
| Térköz | A felső szintű elemek közti távolság. |
| Tartalom igazítása | A felső szintű elemek vízszintes igazítása. Elavult, a **Mobilmenü** csoport **Elemek igazítása** beállítását javasolja helyette. |
| Padding | A felső szintű elemek (hivatkozások, szövegek, ikonok, SVG-k, menükapcsolók) belső távolsága. |
| Háttérszín | A felső szintű elemek háttere. |
| Szegély | A felső szintű elemek szegélye. |
| Tipográfia | A felső szintű elemek betűbeállításai. |
| Átalakítás | Transzformáció a felső szintű elemeken. |
| Átmenet | CSS-átmenet a felső szintű elemeken. |

### Aktív állapot

Az aktuális oldalnak megfelelő elemre (`aria-current="page"`) vonatkozik: **Háttérszín**, **Szegély**, **Tipográfia**.

### Legördülő menü (csak a felső szinten)

| Beállítás | Mit csinál |
| --- | --- |
| Szöveg padding | A legördülő menük szövegének belső távolsága. |
| Ikon padding | A legördülő menük ikonjának belső távolsága. |
| Térköz | A szöveg és az ikon közti távolság a menükapcsolón. |

## Legördülő menü csoport

Az összes legördülő menüre vonatkozik.

### Szöveg és ikon

| Beállítás | Mit csinál |
| --- | --- |
| Szöveg padding | A legördülő menük szövegének belső távolsága. |
| Ikon padding | Az ikon belső távolsága. |
| Térköz | A szöveg és az ikon közti távolság. |
| Ikon pozíciója | Az ikon helye. Balra állítva az ikon a szöveg elé kerül. Alapérték: jobb. |
| Ikon mérete | Az ikon mérete. |
| Ikon színe | Az ikon színe. |
| Ikon átalakítása | Az ikon transzformációja zárt állapotban. |
| Ikon átalakítása (nyitott) | Az ikon transzformációja nyitott állapotban. |
| Ikon átmenete | Az ikon CSS-átmenete. |

Az ikont az egyes legördülő menüknél külön is beállíthatod.

### Tartalom

A legördülő panel (almenü, megamenü vagy többszintű terület) beállításai.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Legkisebb szélesség | A panel legkisebb szélessége. | Nincs |
| Háttérszín | A panel háttere. | Nincs |
| Szegély | A panel szegélye. | Nincs |
| Dobozárnyék | A panel árnyéka. | Nincs |
| Tipográfia | A panel betűbeállításai. | Nincs |
| Átalakítás | A panel transzformációja zárt állapotban. | Nincs |
| Átalakítás (nyitott) | A panel transzformációja nyitott állapotban. | Nincs |
| Átmenet | A panel CSS-átmenete. | Nincs |
| Z-index | A legördülő elemek rétegsorrendje. | 1001 |

### Tétel

A panelen belüli hivatkozásokra és almenükapcsolókra vonatkozik: **Padding**, **Háttér**, **Szegély**, **Tipográfia**, **Átmenet**.

### Többszintű

| Beállítás | Mit csinál |
| --- | --- |
| Engedélyezés | Egyszerre csak az aktív legördülő menü látszik, kattintásra nyílik, a beágyazott legördülők öröklik a többszintű működést. |
| Vissza: szöveg | A vissza gomb felirata, ha be van kapcsolva a többszintű működés. |
| Vissza: tipográfia | A vissza gomb betűbeállításai. |
| Vissza: háttér | A vissza gomb háttérszíne. |

## Mobilmenü

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Nyitva tartás stílusozás közben | A mobilmenü nyitva marad a szerkesztőben a stílusozás idejére. Nem kerül mentésre. | Ki |
| Elrejtés / megjelenítés töréspontnál | Melyik töréspontnál váltson a mobilmenüre. Lehet minden töréspont, „Mindig” vagy „Soha”. | Mobil fekvő |
| Szélesség, Magasság | A mobilmenü mérete. | Nincs |
| Padding (legördülő) | A legördülő tartalom belső távolsága mobilon, a beágyazott legördülők hierarchiájának megjelenítésére. | Nincs |
| Elemek igazítása | A mobilmenü elemeinek függőleges igazítása. | Nincs |
| Tartalom igazítása | A mobilmenü elemeinek vízszintes igazítása. | Nincs |
| Pozíció | A mobilmenü elhelyezése. | Nincs |
| Háttérszín | A mobilmenü háttérszíne. | Nincs |

A **Tétel** résznél az **Elemek igazítása** a mobilmenü tételeinek igazítását adja (a `stretch` érték nélkül).