App-Bar

Eine App-Bar ist ein <header> mit einer Reihe darin. Die Teile sind getrennt, damit du sie anordnen kannst: appBarNav() für Links, appBarSpacer(), um alles Folgende ans andere Ende zu schieben, und appBarActions() für die Buttons am Schluss.

Einfache App-Bar

sitelo
appBar({ brand: 'sitelo' },
  appBarSpacer(),
  appBarActions(
    button({ size: 'sm', variant: 'soft' }, 'Anmelden'),
  ),
)

Mit Navigation

navLink() ist der Linkstil für eine Leiste; current markiert die aktive Seite nicht nur farblich, sondern auch mit aria-current.

sitelo
appBar({ brand: 'sitelo' },
  appBarNav(
    navLink({ href: '#docs', current: true }, 'Doku'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Beispiele'),
  ),
  appBarSpacer(),
  appBarActions(
    button({ size: 'sm', variant: 'outline', color: 'neutral' }, 'GitHub'),
    button({ size: 'sm' }, 'Loslegen'),
  ),
)

Eine Marke mit Zeichen

Die Marke nimmt beliebiges Markup und verlinkt auf /, sofern href nichts anderes sagt.

Ssitelo
v2.6.3
appBar({
  href: '#home',
  brand: stack({ direction: 'row', gap: 'sm', inline: true, align: 'center' },
    avatar({ name: 'S', size: 'sm', square: true, color: 'primary' }),
    'sitelo',
  ),
},
  appBarSpacer(),
  appBarActions(chip({ size: 'sm', color: 'neutral' }, 'v2.6.3')),
)

Sticky und verwischt

sticky heftet die Leiste an den oberen Rand des Scroll-Containers; blur macht sie durchscheinend, sodass Inhalt darunter durchläuft. Beides wird hier in einer scrollenden Box gezeigt, nicht auf der Seite selbst.

sitelo
sticky

Scroll mich — Absatz 1.

Scroll mich — Absatz 2.

Scroll mich — Absatz 3.

Scroll mich — Absatz 4.

Scroll mich — Absatz 5.

Scroll mich — Absatz 6.

div({ style: 'height: 12rem; overflow: auto; border: 1px solid var(--su-border); border-radius: 0.6rem' },
  appBar({ brand: 'sitelo', sticky: true, blur: true },
    appBarSpacer(),
    appBarActions(chip({ size: 'sm', color: 'primary' }, 'sticky')),
  ),
  container({ size: 'sm', style: 'padding-block: 1rem' },
    stack({ gap: 'md' },
      ...Array.from({ length: 6 }, (unused, index) =>
        text({ variant: 'small', tone: 'muted' }, 'Scroll mich — Absatz ' + (index + 1) + '.'),
      ),
    ),
  ),
)

Mit einem Drawer auf kleinen Bildschirmen

Das übliche Muster: Links in der Leiste am Desktop, ein Button, der am Telefon einen drawer() öffnet. Der Drawer ist ein Popover, der Button braucht also kein Skript.

sitelo
fragment(
  appBar({ brand: 'sitelo' },
    appBarSpacer(),
    appBarActions(
      themeToggle(),
      iconButton({
        label: 'Navigation öffnen',
        variant: 'ghost',
        color: 'neutral',
        popovertarget: 'app-bar-drawer',
        icon: icon('menu'),
      }),
    ),
  ),
  drawer({ id: 'app-bar-drawer', title: 'Navigation' },
    navLink({ href: '#docs' }, 'Doku'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Beispiele'),
  ),
)

Props

appBar():

PropTypStandardBeschreibung
brandChild—Inhalt des Marken-Links am Anfang.
hrefstring'/'Wohin die Marke verlinkt.
stickybooleanfalseHeftet die Leiste beim Scrollen nach oben.
blurbooleanfalseDurchscheinender Hintergrund mit Backdrop-Blur.
asstring'header'Element, das gerendert wird.

Die Teile:

TeilPropsStandardBeschreibung
appBarNav—Ein nav-Element, das die Links hält.
appBarSpacer—Flexible Lücke; alles danach rückt ans andere Ende.
appBarActions—Button-Gruppe am Ende.
navLinkhref, current, color—Ein Link im Leistenstil; current markiert die aktive Seite.