Component
Topbar
The application bar: brand, navigation, actions.
import { Topbar } from '@loidolt/theme-svelte';
Example
Topo StudioProject 04
Svelte 5
Notes
- Plain nav links take the
.ldt-topbar__linkclass; the router marks the active page witharia-current="page". - Under
viewport-fit=coverthe bar runs under the notch and pads its content clear of it; the insets are 0 on desktop. Set--ldt-safe-top: 0pxon a bar that is not at the top of the screen.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
brand required | Snippet | — | |
actions | Snippet | — | |
class | string | — | |
navigation | Snippet | — | |
navLabel | string | 'Primary' | Accessible name of the <nav>, so several navs stay distinguishable. |
ref bindable | HTMLElement | null | null |
Plus the attributes of HTMLAttributes<HTMLElement>, forwarded to the root element.