Menü
-
Akkordeon -
Anker -
Audio-Player -
Bild -
Bot -
Breaking News -
Button -
Card -
Chip -
Copyright -
Details -
Exposé -
Fetch -
Flip-Card -
Footer -
Formular: Block -
Formular: Checkbox -
Formular: Combobox -
Formular: Fehlerliste -
Formular: Filter -
Formular: Fortschrittsanzeige -
Formular: Input -
Formular: Layouts -
Formular: Radio -
Formular: Select -
Formular: Switch -
Formular: Textfeld -
Formular: Upload -
Formular: Validierung -
Galerie -
Grid -
Header -
Hervorgehobener Link -
Hervorhebung -
Icon -
In-Page Navigation -
Infobox -
Karussell -
Kontakt -
Links -
Liste -
Logo -
Map -
Meldung -
Menü -
Modal -
Newsletter -
Pager -
Paginierung -
Quicklink-Liste -
Reiter -
Section -
Sidebar -
Skip Link -
Social Media -
Stack -
Stage -
Status -
Suche -
Tabelle -
Tag -
Tourismuszeile -
Video-Player -
Vorspann -
Zeitstempel -
Zitat
Für wien.gv.at gibt es das Menü in 2 Ausprägungen: Das Burger-Menü für wien.gv.at und das Menü für Sonderseiten projektname.wien.gv.at in unterschiedlichen Varianten.
Sonderauftritt Menüs sollten maximal 5 Menüpunkte auf der obersten Ebene haben und maximal 7 Menüpunkte bei den aufgeklappten Untermenüs. Die Farbe des Menüs wird über das Pattern Header definiert.
Weitere Header-Varianten sind unter Header zu finden.
Menü wien.gv.at
- Beim geöffneten Menü ist die restliche Seite hinter einem schwarz-transparenten Layer und nicht mehr scrollbar.
Gescrollt wird stattdessen innerhalb des Menüs. - Am Desktop öffnet sich das Menü als Balken rechts, mobil öffnet es sich vollflächig.
- Bei Klick auf einen Menüpunkt öffnet und schließt sich das Untermenü.
<wm-nav-main type="hidden">
<a href="/nojs" class="fallback">
Menü
<svg width="26" height="26" viewBox="0 0 123.14 123.14" id="burger" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h123.14v123.14H0z"/><path d="M17.67 27.59h87v-6h-87zM17.67 58.57h87v6h-87zM17.67 95.49h87v6h-87z"/>
</svg>
</a>
<div slot="precontent">
<wm-stack horizontal="" gap="xs" alignment="center">
<wm-icon iconid="language"></wm-icon>
<wm-list type="horizontal" separator="pipe" gap="xxs">
<ul>
<li><a href="#">English</a></li>
<li><a href="#">Bosanski Hrvatski Srpski</a></li>
<li><a href="#">Türkçe</a></li>
</ul>
</wm-list>
</wm-stack>
</div>
<ul>
<li>
<a href="#">
<wm-icon iconid="home"></wm-icon>
Startseite
</a>
</li>
<li>
<a href="#">
<wm-icon iconid="pin"></wm-icon>
Stadtplan
</a>
</li>
<li>
<a href="#">
<wm-icon iconid="amtswege"></wm-icon>
Amtswege
</a>
</li>
<li>
<a href="#">
<wm-icon iconid="contact"></wm-icon>
Kontakte
</a>
</li>
<li>
<a href="#">
<wm-icon iconid="money"></wm-icon>
Jobs
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
Freizeit
</a>
<ul>
<li>
<a href="#">
Veranstaltungen
</a>
</li>
<li>
<a href="#">
Baden
</a>
</li>
<li>
<a href="#">
Sport
</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Sportmöglichkeiten</a></li>
<li><a href="#">Kurse</a></li>
<li><a href="#">Vereine</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
Wohnen
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Verkehr
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Bildung
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Gesundheit
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Umwelt
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Zusammenleben
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Stadtentwicklung
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Politik
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Wirtschaft
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
</ul>
<div>
<wm-list type="horizontal">
<ul>
<li><a href="https://facebook.com/wien.at" class="wm-no-external-icon" target="_blank"><wm-icon iconid="facebook">Facebook</wm-icon></a></li>
<li><a href="https://instagram.com/stadtwien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="instagram">Instagram</wm-icon></a></li>
<li><a href="https://x.com/Stadt_Wien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="twitter">X (Twitter)</wm-icon></a></li>
<li><a href="https://tiktok.com/@stadtwien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="tiktok">TikTok</wm-icon></a></li>
<li><a href="https://youtube.com/channel/UCGLOly45we_1ZTXAXF7TZDA" class="wm-no-external-icon" target="_blank"><wm-icon iconid="youtube">YouTube</wm-icon></a></li>
<li><a href="https://www.wien.gv.at/bot/" class="wm-no-external-icon" target="_blank"><wm-icon iconid="wien-bot">Wienbot</wm-icon></a></li>
</ul>
</wm-list>
<p>
<a href="#">
<strong>NEWSLETTER</strong>
</a>
</p>
</div>
</wm-nav-main>Menü Sonderauftritt
Das Menü der Sonderauftritte ist in einer der Markenfarben Light (30 Prozent) eingefärbt, die Schrift ist Fast Schwarz. Das aufgeklappte Menü ist in 1 der 6 Markenfarben zu 100 Prozent eingefärbt: Morgenrot, Flieder, Abendstimmung, Frischgrün, Goldgelb oder Nebelgrau. Die Schriftfarbe ist Fast Schwarz oder bei der Farbe Abendstimmung ausnahmsweise Weiß.
<wm-nav-main microsite type="hiddenmobile">
<ul>
<li>
<a href="#">
Menüpunkt 1
</a>
</li>
<li>
<a href="#" aria-current="page">
Menüpunkt 2
</a>
</li>
<li>
<a href="#">
Menüpunkt 3
</a>
</li>
<li>
<a href="#">
Menüpunkt 4
</a>
</li>
<li>
<a href="#">
Menüpunkt 5
</a>
</li>
</ul>
</wm-nav-main>Menü Sonderauftritt mit 2. Ebene
<wm-nav-main type="hiddenmobile" microsite>
<ul>
<li>
<a href="#">
eBook
</a>
<ul>
<li>
<a href="#">
Übersicht
</a>
</li>
<li>
<a href="#">
eBook 1
</a>
</li>
<li>
<a href="#">
eBook 2
</a>
</li>
<li>
<a href="#">
eBook 3
</a>
</li>
</ul>
</li>
<li>
<a href="#">
eAudio
</a>
<ul>
<li>
<a href="#">
Übersicht
</a>
</li>
<li>
<a href="#">
eAudio 1
</a>
</li>
<li>
<a href="#">
eAudio 2
</a>
</li>
<li>
<a href="#">
eAudio 3
</a>
</li>
<li>
<a href="#">
eAudio 4
</a>
</li>
<li>
<a href="#">
eAudio 5
</a>
</li>
</ul>
</li>
<li>
<a href="#">
eMagazine
</a>
<ul>
<li>
<a href="#">
Übersicht
</a>
</li>
<li>
<a href="#">
eMagazine 1
</a>
</li>
</ul>
</li>
<li>
<a href="#">
ePaper
</a>
<ul>
<li>
<a href="#">
Übersicht
</a>
</li>
<li>
<a href="#">
ePaper 1
</a>
</li>
<li>
<a href="#">
ePaper 2
</a>
</li>
<li>
<a href="#">
ePaper 3
</a>
</li>
</ul>
</li>
<li>
<a href="#">
eLearning
</a>
<ul>
<li>
<a href="#">
Übersicht
</a>
</li>
<li>
<a href="#">
eLearning 1
</a>
</li>
<li>
<a href="#">
eLearning 2
</a>
</li>
</ul>
</li>
</ul>
</wm-nav-main>Menü Sonderauftritt mit 3. Ebene
<wm-nav-main type="hiddenmobile" microsite>
<ul>
<li>
<a href="#">
eBook
</a>
<ul>
<li>
<a href="#">
Übersicht
</a>
</li>
<li>
<a href="#">
eBook 1
</a>
<ul>
<li>
<a href="#">
Übersicht
</a>
</li>
<li>
<a href="#">
subeBook 1
</a>
</li>
<li>
<a href="#">
subeBook 2
</a>
</li>
<li>
<a href="#">
subeBook 3
</a>
</li>
</ul>
</li>
<li>
<a href="#">
eBook 2
</a>
</li>
<li>
<a href="#">
eBook 3
</a>
</li>
</ul>
</li>
<li>
<a href="#">
eAudio
</a>
<ul>
<li>
<a href="#">
Übersicht
</a>
</li>
<li>
<a href="#">
eAudio 1
</a>
</li>
<li>
<a href="#">
eAudio 2
</a>
</li>
<li>
<a href="#">
eAudio 3
</a>
</li>
<li>
<a href="#">
eAudio 4
</a>
</li>
<li>
<a href="#">
eAudio 5
</a>
</li>
</ul>
</li>
<li>
<a href="#">
eMagazine
</a>
<ul>
<li>
<a href="#">
Übersicht
</a>
</li>
<li>
<a href="#">
eMagazine 1
</a>
</li>
</ul>
</li>
<li>
<a href="#">
ePaper
</a>
<ul>
<li>
<a href="#">
Übersicht
</a>
</li>
<li>
<a href="#">
ePaper 1
</a>
</li>
<li>
<a href="#">
ePaper 2
</a>
</li>
<li>
<a href="#">
ePaper 3
</a>
</li>
</ul>
</li>
<li>
<a href="#">
eLearning
</a>
<ul>
<li>
<a href="#">
Übersicht
</a>
</li>
<li>
<a href="#">
eLearning 1
</a>
</li>
<li>
<a href="#">
eLearning 2
</a>
</li>
</ul>
</li>
</ul>
</wm-nav-main>Menü Sonderauftritt mit vielen Menüpunkten
<wm-nav-main type="hiddenmobile" microsite style="--navmain-gap: var(--wm-spacing-s)">
<ul>
<li>
<a href="#">
Menüpunkt 1
</a>
</li>
<li>
<a href="#">
Menüpunkt 2
</a>
</li>
<li>
<a href="#">
Menüpunkt 3
</a>
</li>
<li>
<a href="#">
Menüpunkt 4
</a>
</li>
<li>
<a href="#">
Menüpunkt 5
</a>
</li>
</ul>
</wm-nav-main>Menü Sonderauftritt mit benutzerdefinierten Labels
<wm-nav-main microsite type="hiddenmobile" labelOpen="Menu" labelClose="Close">
<ul>
<li>
<a href="#">
eBook
</a>
</li>
<li>
<a href="#">
eAudio
</a>
</li>
<li>
<a href="#">
eMagazine
</a>
</li>
<li>
<a href="#">
ePaper
</a>
</li>
<li>
<a href="#">
eLearning
</a>
</li>
</ul>
</wm-nav-main>Menü Sonderauftritt mit verstecktem Label
<wm-nav-main microsite type="hiddenmobile" hideLabel>
<ul>
<li>
<a href="#">
eBook
</a>
</li>
<li>
<a href="#">
eAudio
</a>
</li>
<li>
<a href="#">
eMagazine
</a>
</li>
<li>
<a href="#">
ePaper
</a>
</li>
<li>
<a href="#">
eLearning
</a>
</li>
</ul>
</wm-nav-main>Menü Sonderauftritt mit Burger
<wm-nav-main microsite type="hidden">
<ul>
<li>
<a href="#">
eBook
</a>
</li>
<li>
<a href="#">
eAudio
</a>
</li>
<li>
<a href="#">
eMagazine
</a>
</li>
<li>
<a href="#">
ePaper
</a>
</li>
<li>
<a href="#">
eLearning
</a>
</li>
</ul>
</wm-nav-main>Abhängigkeiten
<script src="https://assets.wien.gv.at/theme/latest/js/components/NavMain/NavMain.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Button/Button.js" type="module"></script>import { NavMain } from './wienermelange/assets/js/components/NavMain/NavMain.js';
import { Button } from './wienermelange/assets/js/components/Button/Button.js';Eigenschaften
| Eigenschaft | Beschreibung | Werte | Default |
|---|---|---|---|
label
|
Accessible Name der Navigations-Landmark |
String
|
"Haupt"
|
labelOpen
|
Label Menü geschlossen |
String
|
"Menü"
|
labelOpenIcon
|
Icon Menü geschlossen |
String
|
"burger"
|
labelClose
|
Label Menü offen |
String
|
"Schließen"
|
hideLabel
|
Soll das Label angezeigt werden |
Boolean
|
false
|
isopen
|
Menü offen oder zu |
Boolean
|
false
|
microsite
|
Microsite oder Hauptseite |
Boolean
|
false
|
type
|
Art des Menüs (immer versteckt, immer sichtbar oder nur auf kleinen Viewsports versteckt) |
'hidden'|'visible'|'hiddenmobile'
|
"visible"
|
Slots
| Name | Beschreibung |
|---|---|
default
|
Liste |
precontent
|
Header der Navigation |
postcontent
|
Inhalt nach den Listen |
Methoden
| Eigenschaft | Optionen | Argumente |
|---|---|---|
open
|
Menü öffnen | / |
close
|
Menü schließen | / |
CSS API
| Property | Beschreibung |
|---|---|
--navmain-wrapperwidth
|
Breite des Wrappers im Menü |
--navmain-font-weight
|
Schriftstärke der Menüpunkte |
--navmain-gap
|
Abstand zwischen Menüpunkten auf der 1. Ebene |
Kontakt
Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht
bietet?
handbuch@ma53.wien.gv.at