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" label="Hauptnavigation">
<wm-stack horizontal="" slot="buttoncontent" gap="xs">
<span class="wm-h-vh wm-h-vh--mobil">Menü</span>
<wm-icon iconid="burger"></wm-icon>
</wm-stack>
<ul>
<li>
<a href="#">
<wm-icon iconid="language"></wm-icon>
Deutsch
</a>
<ul>
<li><a href="#">English</a></li>
<li><a href="#">Bosanski Hrvatski Srpski</a></li>
<li><a href="#">Türkçe</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#">
<wm-icon iconid="vienna"></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="jobs"></wm-icon>
Jobs bei der Stadt
</a>
</li>
</ul>
<ul>
<li>
<a href="#">Freizeit</a>
<ul>
<li>
<a href="#">Übersicht</a>
</li>
<li>
<a href="#">Veranstaltungen</a>
</li>
<li>
<a href="#">Baden</a>
</li>
<li>
<a href="#">Kultur</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Geschichte</a></li>
<li><a href="#">Förderungen</a></li>
<li><a href="#">Museen</a></li>
<li><a href="#">Musik</a></li>
<li><a href="#">Film</a></li>
<li><a href="#">Bühne & Tanz</a></li>
<li><a href="#">Lesen</a></li>
</ul>
</li>
<li>
<a href="#">
Märkte
</a>
</li>
<li>
<a href="#">
Natur
</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Erholungsgebiete</a></li>
<li><a href="#">Parks & Gärten</a></li>
<li><a href="#">Wandern</a></li>
</ul>
</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>
<li>
<a href="#">
Radfahren
</a>
</li>
<li>
<a href="#">
Spielplätze
</a>
</li>
<li>
<a href="#">
Grillen
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Wohnen
</a>
<ul>
<li>
<a href="#">Übersicht</a>
</li>
<li>
<a href="#">Meldeservice</a>
</li>
<li>
<a href="#">Wohnungssuche</a>
</li>
<li>
<a href="#">Gemeindewohnungen</a>
</li>
<li>
<a href="#">Bauen</a>
</li>
<li>
<a href="#">Förderungen</a>
</li>
<li>
<a href="#">Hilfe & Beratung</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Servicestellen</a></li>
<li><a href="#">Wohnen im Alter</a></li>
<li><a href="#">Betreutes Wohnen</a></li>
<li><a href="#">Barrierefreies Wohnen</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
Verkehr
</a>
<ul>
<li>
<a href="#">Übersicht</a>
</li>
<li>
<a href="#">Parken</a>
</li>
<li>
<a href="#">Auto & Motorrad</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Parken</a></li>
<li><a href="#">Verkehrslage</a></li>
<li><a href="#">Carsharing</a></li>
<li><a href="#">Taxi</a></li>
<li><a href="#">Motorrad</a></li>
</ul>
</li>
<li>
<a href="#">Rad</a>
</li>
<li>
<a href="#">Öffentlicher Verkehr</a>
</li>
<li>
<a href="#">Zu Fuß</a>
</li>
<li>
<a href="#">Baustellen</a>
</li>
<li>
<a href="#">Verkehrssicherheit</a>
</li>
</ul>
</li>
<li>
<a href="#">
Bildung
</a>
<ul>
<li>
<a href="#">Übersicht</a>
</li>
<li>
<a href="#">Kindergarten</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Alle Standorte</a></li>
<li><a href="#">Anmeldung</a></li>
<li><a href="#">Servicestellen</a></li>
<li><a href="#">Jobs & Ausbildung</a></li>
<li><a href="#">Förderungen</a></li>
</ul>
</li>
<li>
<a href="#">Schule</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Bildungsdirektion</a></li>
<li><a href="#">Alle Standorte</a></li>
<li><a href="#">Förderungen</a></li>
<li><a href="#">Tagesbetreuung & Hort</a></li>
</ul>
</li>
<li>
<a href="#">Lehre</a>
</li>
<li>
<a href="#">Studium</a>
</li>
<li>
<a href="#">Weiterbildung</a>
</li>
<li>
<a href="#">Büchereien & Archive</a>
</li>
<li>
<a href="#">Forschung</a>
</li>
</ul>
</li>
<li>
<a href="#">
Gesundheit
</a>
<ul>
<li>
<a href="#">Übersicht</a>
</li>
<li>
<a href="#">Beratung & Vorsorge</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Vorsorgeuntersuchung</a></li>
<li><a href="#">Impfen</a></li>
<li><a href="#">Schwangerschaft</a></li>
<li><a href="#">Psychische Gesundheit</a></li>
</ul>
</li>
<li>
<a href="#">Krankenhäuser</a>
</li>
<li>
<a href="#">Ärzte & Apotheken</a>
</li>
<li>
<a href="#">Pflege</a>
</li>
</ul>
</li>
<li>
<a href="#">
Umwelt
</a>
<ul>
<li>
<a href="#">Übersicht</a>
</li>
<li>
<a href="#">Klima</a>
</li>
<li>
<a href="#">Müll</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Mistplätze</a></li>
<li><a href="#">Mülltrennung</a></li>
<li><a href="#">48er-Tandler</a></li>
<li><a href="#">Müllabfuhr</a></li>
</ul>
</li>
<li>
<a href="#">Wasser</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Gewässer</a></li>
<li><a href="#">Trinkwasser</a></li>
<li><a href="#">Kanalisation</a></li>
<li><a href="#">Hochwasser</a></li>
</ul>
</li>
<li>
<a href="#">Energie</a>
</li>
<li>
<a href="#">Wetter</a>
</li>
<li>
<a href="#">Umweltschutz</a>
</li>
<li>
<a href="#">Forst- & Landwirtschaft</a>
</li>
</ul>
</li>
<li>
<a href="#">
Zusammenleben
</a>
<ul>
<li>
<a href="#">Übersicht</a>
</li>
<li>
<a href="#">Kind & Familie</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Beratung</a></li>
<li><a href="#">Baby</a></li>
<li><a href="#">Kinder & Jugendliche</a></li>
<li><a href="#">Adoption</a></li>
<li><a href="#">Pflegefamilie</a></li>
<li><a href="#">Krise</a></li>
</ul>
</li>
<li>
<a href="#">Ehe & Partnerschaft</a>
</li>
<li>
<a href="#">Senior*innen</a>
</li>
<li>
<a href="#">Integration</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Ankommen in Wien</a></li>
<li><a href="#">Beratung</a></li>
<li><a href="#">Deutsch lernen</a></li>
<li><a href="#">Förderungen</a></li>
</ul>
</li>
<li>
<a href="#">Ehrenamtliche Arbeit</a>
</li>
<li>
<a href="#">Gleichstellung</a>
</li>
<li>
<a href="#">Sicherheit</a>
</li>
<li>
<a href="#">Tiere</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Fundservice</a></li>
<li><a href="#">Tierheime</a></li>
<li><a href="#">Tiergesundheit</a></li>
<li><a href="#">Haus- & Nutztiere</a></li>
<li><a href="#">Kauf & Zucht</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
Stadtplanung
</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Projekte</a></li>
<li><a href="#">Bürger*innen-Beteiligung</a></li>
<li><a href="#">Flächenwidmung</a></li>
<li><a href="#">Geodaten</a></li>
<li><a href="#">Stadtforschung</a></li>
<li><a href="#">Strategien</a></li>
</ul>
</li>
<li>
<a href="#">
Politik
</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Bezirke</a></li>
<li><a href="#">Stadtpolitik</a></li>
<li><a href="#">Landespolitik</a></li>
<li><a href="#">Wahlen</a></li>
<li><a href="#">Mitbestimmen</a></li>
<li><a href="#">Finanzen</a></li>
<li><a href="#">Internationales</a></li>
</ul>
</li>
<li>
<a href="#">
Wirtschaft
</a>
<ul>
<li>
<a href="#">Übersicht</a>
</li>
<li>
<a href="#">Arbeit</a>
</li>
<li>
<a href="#">Gründen & Gewerbe</a>
</li>
<li>
<a href="#">Betriebsanlagen</a>
</li>
<li>
<a href="#">Hilfe & Beratung</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Förderung & Finanzierung</a></li>
<li><a href="#">Veranstalter*innen</a></li>
<li><a href="#">Ökobusiness</a></li>
</ul>
</li>
<li>
<a href="#">Stadt als Auftraggeberin</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Ausschreibungen</a></li>
<li><a href="#">Vertragsbestimmungen</a></li>
<li><a href="#">Vorgaben für Bauprojekte</a></li>
<li><a href="#">Schlichtungsstelle</a></li>
</ul>
</li>
<li>
<a href="#">Märkte</a>
</li>
<li>
<a href="#">Wirtschaftsstandort Wien</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#">Mein Wien</a>
</li>
</ul>
<div>
<wm-list type="horizontal" gap="s">
<ul>
<li><a href="https://bsky.app/profile/wien.gv.at" class="wm-no-external-icon" target="_blank"><wm-icon iconid="bluesky">BlueSky</wm-icon></a></li>
<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://www.linkedin.com/company/city-of-vienna/" class="wm-no-external-icon" target="_blank"><wm-icon iconid="linkedin">Linked In</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://www.wien.gv.at/bot/" class="wm-no-external-icon" target="_blank"><wm-icon iconid="wien-bot">Wienbot</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://youtube.com/channel/UCGLOly45we_1ZTXAXF7TZDA" class="wm-no-external-icon" target="_blank"><wm-icon iconid="youtube">YouTube</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">
<wm-stack horizontal="" gap="xs" slot="buttoncontent">
<span class="wm-h-vh">Menü</span>
<wm-icon iconid="burger"></wm-icon>
</wm-stack>
<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>
<wm-stack horizontal="" gap="xs" slot="buttoncontent">
<span class="wm-h-vh">Menü</span>
<wm-icon iconid="burger"></wm-icon>
</wm-stack>
<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>
<wm-stack horizontal="" gap="xs" slot="buttoncontent">
<span class="wm-h-vh">Menü</span>
<wm-icon iconid="burger"></wm-icon>
</wm-stack>
<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)">
<wm-stack horizontal="" gap="xs" slot="buttoncontent">
<span class="wm-h-vh">Menü</span>
<wm-icon iconid="burger"></wm-icon>
</wm-stack>
<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" labelClose="Close">
<wm-stack horizontal="" gap="xs" slot="buttoncontent">
<span>Menu</span>
<wm-icon iconid="burger"></wm-icon>
</wm-stack>
<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">
<wm-stack horizontal="" gap="xs" slot="buttoncontent">
<span class="wm-h-vh">Menü</span>
<wm-icon iconid="burger"></wm-icon>
</wm-stack>
<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">
<wm-stack horizontal="" gap="xs" slot="buttoncontent">
<span class="wm-h-vh wm-h-vh--mobil">Menü</span>
<wm-icon iconid="burger"></wm-icon>
</wm-stack>
<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