Eigenständige Bausteine für HTML und PHP. Jedes Beispiel hat seinen vollständigen Quellcode direkt darunter. Farben, Hell/Dunkel, Dichte und Schrift folgen deiner Docs-Ansicht.
Interaktionen bleiben lokale Demos. Formulare senden keine Nachrichten; es gibt keine Zahlung oder Server-Synchronisation. Beim mehrfachen Einfügen IDs eindeutig vergeben und den jeweiligen Initialisierer einmal nach dem Markup aufrufen.
Navigation & Arbeitsflächen
Responsiver Studio-Header
Primärnavigation mit sichtbaren Desktoplinks und mobilem Disclosure. Escape, Außenklick, Fokuswechsel und echte Abschnittsziele; ohne JavaScript bleiben alle Links sichtbar.
Auf großen Bildschirmen bleiben die Bereiche sichtbar. Mobil öffnet der Button die Navigation. Escape schließt sie und gibt den Fokus zurück; alle Links führen zu echten Zielen dieser Demo.
Übersicht
Ein gemeinsamer Ort für Projekte, Menschen und Ideen.
Arbeitsweise
Kurze Wege, nachvollziehbare Entscheidungen und konzentrierte Arbeit.
Kontakt
Demo-Kontaktbereich. Es werden keine Nachrichten versendet.
HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Responsiver Studio-Header · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-navigation.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bn-block" data-bn-block="header" aria-labelledby="bn-header-title">
<header class="bn-header">
<a class="bn-brand" href="#bn-header-overview">
<span class="bn-brand-mark" aria-hidden="true">r</span>rittek studio</a>
<button class="r-button r-button-sm" type="button" data-bn-collapse-toggle aria-controls="bn-header-links" aria-expanded="true" hidden>Bereiche</button>
<nav id="bn-header-links" aria-label="Studio-Bereiche">
<div class="bn-links">
<a href="#bn-header-overview" aria-current="page">Übersicht</a>
<a href="#bn-header-work">Arbeitsweise</a>
<a href="#bn-header-contact">Kontakt</a>
</div>
</nav>
</header>
<div class="bn-intro">
<p class="bn-eyebrow">01 / RESPONSIVER HEADER</p>
<h3 id="bn-header-title">Ein klarer Einstieg.</h3>
<p>Auf großen Bildschirmen bleiben die Bereiche sichtbar. Mobil öffnet der Button die Navigation. Escape schließt sie und gibt den Fokus zurück; alle Links führen zu echten Zielen dieser Demo.</p>
<div class="bn-targets">
<section class="bn-target" id="bn-header-overview" tabindex="-1">
<h4>Übersicht</h4>
<p>Ein gemeinsamer Ort für Projekte, Menschen und Ideen.</p>
</section>
<section class="bn-target" id="bn-header-work" tabindex="-1">
<h4>Arbeitsweise</h4>
<p>Kurze Wege, nachvollziehbare Entscheidungen und konzentrierte Arbeit.</p>
</section>
<section class="bn-target" id="bn-header-contact" tabindex="-1">
<h4>Kontakt</h4>
<p>Demo-Kontaktbereich. Es werden keine Nachrichten versendet.</p>
</section>
</div>
</div>
</section>
<script type="module">
import {initNavigationBlocks} from 'https://ui.rittek.de/assets/modules/blocks-navigation.js';
const navigation = initNavigationBlocks(document);
// navigation.destroy(); // Listener entfernen und Ausgangsmarkup wiederherstellen
</script>
</body>
</html>
Navigation & Arbeitsflächen
Gruppiertes Megamenü
Zwei gegenseitig ausschließende Disclosure-Panels mit echten Links, Kontextspalte und mobiler Stapelung. Normale Linksemantik; kein vorgetäuschtes ARIA-Menü.
Zwei inhaltlich getrennte Panels mit Gruppen und Kontext. Es bleibt immer nur ein Panel geöffnet; kleinere Bildschirme erhalten eine gestapelte Darstellung.
Designsystem
Semantische Tokens verbinden Komponenten und Layouts.
Workspace
Eine ruhige Struktur für tägliche Aufgaben.
Datenansichten
Von Kennzahlen bis zu prüfbaren Details.
Einbindung
HTML und Styles einbinden, Modul einmal initialisieren.
Zugänglichkeit
Lesbare Inhalte, Tastatur und sichtbare Fokusmarkierung.
HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Gruppiertes Megamenü · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-navigation.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bn-block" data-bn-block="mega" aria-labelledby="bn-mega-title">
<header class="bn-header">
<a class="bn-brand" href="#bn-mega-design">
<span class="bn-brand-mark" aria-hidden="true">r</span>rittek studio</a>
<nav class="bn-mega-links" aria-label="Studio-Angebote">
<div data-bn-popover>
<button class="r-button r-button-sm" type="button" id="bn-mega-products-toggle" data-bn-pop-toggle aria-controls="bn-mega-products" aria-expanded="false" hidden>Bausteine</button>
<section class="bn-mega-panel" id="bn-mega-products" data-bn-panel aria-labelledby="bn-mega-products-label">
<h4 class="sr-only" id="bn-mega-products-label">Bausteine</h4>
<div class="bn-mega-grid">
<div>
<h4>Gestalten</h4>
<a href="#bn-mega-design">Designsystem<span>Ein gemeinsames Fundament</span>
</a>
<a href="#bn-mega-workspace">Workspace<span>Struktur für den Arbeitsalltag</span>
</a>
</div>
<div>
<h4>Weiterdenken</h4>
<a href="#bn-mega-data">Datenansichten<span>Informationen verstehen</span>
</a>
<a href="#bn-mega-guide">Einbindung<span>HTML und PHP zuerst</span>
</a>
</div>
<aside class="bn-feature-note">
<strong>Ein System. Viele Wege.</strong>
<p>Gleiche Farbrollen, getrennte Schriftgröße und Abstände. Dieses Panel ist Linknavigation, kein ARIA-Aktionsmenü.</p>
</aside>
</div>
</section>
</div>
<div data-bn-popover>
<button class="r-button r-button-sm" type="button" id="bn-mega-resources-toggle" data-bn-pop-toggle aria-controls="bn-mega-resources" aria-expanded="false" hidden>Wissen</button>
<section class="bn-mega-panel" id="bn-mega-resources" data-bn-panel aria-labelledby="bn-mega-resources-label">
<h4 class="sr-only" id="bn-mega-resources-label">Wissen</h4>
<div class="bn-mega-grid">
<div>
<h4>Einstieg</h4>
<a href="#bn-mega-guide">Einbindungsleitfaden<span>Kleine Schritte, klare APIs</span>
</a>
</div>
<div>
<h4>Vertiefung</h4>
<a href="#bn-mega-access">Zugänglichkeit<span>Bedienung über Tastatur</span>
</a>
</div>
<aside class="bn-feature-note">
<strong>Sie behalten die Kontrolle.</strong>
<p>Pfeil runter öffnet und fokussiert den ersten Link. Tab bewegt sich normal durch die Navigation. Escape schließt.</p>
</aside>
</div>
</section>
</div>
</nav>
</header>
<div class="bn-intro">
<p class="bn-eyebrow">02 / MEGAMENUE</p>
<h3 id="bn-mega-title">Zusammenhänge statt langer Listen.</h3>
<p>Zwei inhaltlich getrennte Panels mit Gruppen und Kontext. Es bleibt immer nur ein Panel geöffnet; kleinere Bildschirme erhalten eine gestapelte Darstellung.</p>
<div class="bn-targets">
<section class="bn-target" id="bn-mega-design" tabindex="-1">
<h4>Designsystem</h4>
<p>Semantische Tokens verbinden Komponenten und Layouts.</p>
</section>
<section class="bn-target" id="bn-mega-workspace" tabindex="-1">
<h4>Workspace</h4>
<p>Eine ruhige Struktur für tägliche Aufgaben.</p>
</section>
<section class="bn-target" id="bn-mega-data" tabindex="-1">
<h4>Datenansichten</h4>
<p>Von Kennzahlen bis zu prüfbaren Details.</p>
</section>
<section class="bn-target" id="bn-mega-guide" tabindex="-1">
<h4>Einbindung</h4>
<p>HTML und Styles einbinden, Modul einmal initialisieren.</p>
</section>
<section class="bn-target" id="bn-mega-access" tabindex="-1">
<h4>Zugänglichkeit</h4>
<p>Lesbare Inhalte, Tastatur und sichtbare Fokusmarkierung.</p>
</section>
</div>
</div>
</section>
<script type="module">
import {initNavigationBlocks} from 'https://ui.rittek.de/assets/modules/blocks-navigation.js';
const navigation = initNavigationBlocks(document);
// navigation.destroy(); // Listener entfernen und Ausgangsmarkup wiederherstellen
</script>
</body>
</html>
Navigation & Arbeitsflächen
Sidebar und mobiler Workspace-Drawer
Eine Navigation mit nativen Unterabschnitten wechselt am Breakpoint vom Desktop-Dock in einen modalen Drawer. Escape, Außenklick auf Backdrop, Fokus und aktuelle Abschnittswahl sind funktional.
Desktop zeigt eine feste Seitenleiste. Mobil wandert dieselbe Navigation in einen nativen Dialog; es entstehen keine doppelten Links. Escape und die Schließen-Schaltflaeche geben den Fokus zurück.
Übersicht
Ihr fiktiver Arbeitsbereich im Blick.
Projekte
Aufgaben und Projekte im gemeinsamen Kontext.
Bibliothek
Wissen geordnet und schnell erreichbar.
Leitlinien
Dokumentierte Grundlagen für das Team.
Team
Dieser Bereich enthaelt keine echten Kontodaten.
HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sidebar und mobiler Workspace-Drawer · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-navigation.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bn-block" data-bn-block="sidebar" aria-labelledby="bn-sidebar-title">
<div class="bn-workspace">
<aside class="bn-sidebar">
<a class="bn-brand" href="#bn-sidebar-overview">
<span class="bn-brand-mark" aria-hidden="true">r</span>rittek studio</a>
<div data-bn-dock>
<nav class="bn-side-nav" data-bn-sidebar-nav aria-label="Workspace-Navigation">
<h4>Workspace</h4>
<a href="#bn-sidebar-overview" aria-current="page">Übersicht</a>
<a href="#bn-sidebar-projects">Projekte</a>
<details open>
<summary>Wissen & Ressourcen</summary>
<a href="#bn-sidebar-library">Bibliothek</a>
<a href="#bn-sidebar-guidelines">Leitlinien</a>
</details>
<h4>Organisation</h4>
<a href="#bn-sidebar-team">Team</a>
</nav>
</div>
</aside>
<div class="bn-workspace-body">
<div class="bn-mobile-bar">
<p class="bn-eyebrow">03 / WORKSPACE</p>
<button class="r-button r-button-sm" type="button" data-bn-drawer-open aria-haspopup="dialog" aria-controls="bn-sidebar-drawer" aria-expanded="false" hidden>Navigation öffnen</button>
</div>
<div class="bn-intro">
<h3 id="bn-sidebar-title">Alles an seinem Platz.</h3>
<p>Desktop zeigt eine feste Seitenleiste. Mobil wandert dieselbe Navigation in einen nativen Dialog; es entstehen keine doppelten Links. Escape und die Schließen-Schaltflaeche geben den Fokus zurück.</p>
</div>
<div class="bn-targets">
<section class="bn-target" id="bn-sidebar-overview" tabindex="-1">
<h4>Übersicht</h4>
<p>Ihr fiktiver Arbeitsbereich im Blick.</p>
</section>
<section class="bn-target" id="bn-sidebar-projects" tabindex="-1">
<h4>Projekte</h4>
<p>Aufgaben und Projekte im gemeinsamen Kontext.</p>
</section>
<section class="bn-target" id="bn-sidebar-library" tabindex="-1">
<h4>Bibliothek</h4>
<p>Wissen geordnet und schnell erreichbar.</p>
</section>
<section class="bn-target" id="bn-sidebar-guidelines" tabindex="-1">
<h4>Leitlinien</h4>
<p>Dokumentierte Grundlagen für das Team.</p>
</section>
<section class="bn-target" id="bn-sidebar-team" tabindex="-1">
<h4>Team</h4>
<p>Dieser Bereich enthaelt keine echten Kontodaten.</p>
</section>
</div>
</div>
</div>
<dialog class="bn-drawer" id="bn-sidebar-drawer" data-bn-drawer aria-labelledby="bn-sidebar-drawer-title">
<div class="bn-drawer-head">
<h3 class="font-semibold" id="bn-sidebar-drawer-title">Workspace-Navigation</h3>
<button class="r-button r-button-sm" type="button" data-bn-drawer-close autofocus>Schließen</button>
</div>
<div data-bn-drawer-slot>
</div>
</dialog>
<p class="bn-status" data-bn-status role="status">
</p>
</section>
<script type="module">
import {initNavigationBlocks} from 'https://ui.rittek.de/assets/modules/blocks-navigation.js';
const navigation = initNavigationBlocks(document);
// navigation.destroy(); // Listener entfernen und Ausgangsmarkup wiederherstellen
</script>
</body>
</html>
Navigation & Arbeitsflächen
Kontomenü mit echten lokalen Aktionen
ARIA-Aktionsmenü mit Tastaturnavigation, Profilvorschau und einem wirkenden lokalen Benachrichtigungsschalter. Keine angebliche Anmeldung, Abmeldung oder Kontosynchronisation.
Rolle: Design & Entwicklung. Workspace: Rittek Studio. Alle Angaben sind fiktiv; es wurde kein Server abgefragt und keine Sitzung verändert.
Menüaktionen verändern nur die lokale Ansicht.
Pfeiltasten, Home und End navigieren im Menü. Escape gibt den Fokus zurück; Tab verlaesst das Menü. Es gibt keine echte Abmelde- oder Kontospeicheraktion.
HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kontomenü mit echten lokalen Aktionen · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-navigation.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bn-block" data-bn-block="account" aria-labelledby="bn-account-title">
<div class="bn-account-card">
<div class="bn-person">
<span class="bn-avatar" aria-hidden="true">AB</span>
<div>
<p class="bn-eyebrow">04 / KONTOAKTIONEN</p>
<h3 class="font-semibold" id="bn-account-title">Alex Beispiel</h3>
<p class="bn-muted">Lokales Musterkonto · keine Anmeldung</p>
</div>
</div>
<div class="bn-menu-wrap" data-bn-popover>
<button class="r-button" type="button" id="bn-account-toggle" data-bn-pop-toggle aria-haspopup="menu" aria-controls="bn-account-menu" aria-expanded="false" hidden>Kontomenü</button>
<div class="bn-menu-panel" id="bn-account-menu" role="menu" aria-labelledby="bn-account-toggle" data-bn-panel>
<p class="bn-menu-caption" role="presentation">Aktionen gelten nur in dieser Demo.</p>
<button type="button" role="menuitem" tabindex="-1" data-bn-action="profile" disabled>Profilvorschau anzeigen</button>
<button type="button" role="menuitemcheckbox" tabindex="-1" aria-checked="false" data-bn-action="mute" disabled>Demo-Benachrichtigungen stumm</button>
</div>
</div>
</div>
<section class="bn-profile" data-bn-profile aria-labelledby="bn-account-profile-title">
<h4 class="font-semibold" id="bn-account-profile-title" tabindex="-1">Profilvorschau: Alex Beispiel</h4>
<p class="bn-muted mt-3">Rolle: Design & Entwicklung. Workspace: Rittek Studio. Alle Angaben sind fiktiv; es wurde kein Server abgefragt und keine Sitzung verändert.</p>
</section>
<p class="bn-status" data-bn-status role="status" aria-atomic="true">Menüaktionen verändern nur die lokale Ansicht.</p>
<p class="bn-muted mt-3">Pfeiltasten, Home und End navigieren im Menü. Escape gibt den Fokus zurück; Tab verlaesst das Menü. Es gibt keine echte Abmelde- oder Kontospeicheraktion.</p>
</section>
<script type="module">
import {initNavigationBlocks} from 'https://ui.rittek.de/assets/modules/blocks-navigation.js';
const navigation = initNavigationBlocks(document);
// navigation.destroy(); // Listener entfernen und Ausgangsmarkup wiederherstellen
</script>
</body>
</html>
Navigation & Arbeitsflächen
Ansichtsmenü für Karten und Listen
Werkzeugmenü mit exklusiver ARIA-Radioauswahl: dieselben Datensätze wechseln tatsächlich zwischen Karten- und Listenlayout. Auswahl und Fokus bleiben nachvollziehbar.