Quaff

QNavbar

Navigation bars place three to five primary destinations at the bottom of a layout. Display icons and labels, with an active indicator.

LANTERN LANE MARKET

Stalls

info QNavbar API Source
interface QNavbarProps extends Omit<HTMLAttributes<HTMLElement>, "children">
activeColor
?: string = "secondary-container"
Color of active destination indicators. Use a theme container color such as `primary-container`. See for supported color values.
bordered
?: boolean = false
Whether the component should have a border.
height
?: number = 64
Minimum height of the navigation bar in pixels, excluding the bottom safe-area inset.
horizontal
?: boolean = false
Places each destination's icon and label next to each other. Material Design recommends this arrangement for medium-width layouts from 600px through 839px.
info QNavItem API Source
interface QNavItemProps extends Omit<HTMLAttributes<HTMLElement>, "children">
active
?: boolean = undefined
Marks the item as the current destination and overrides automatic route matching when set. Router links are activated automatically when this prop is omitted.
activeClass
?: string = undefined
Class string to apply when the component (or its associated route) is active. `activeClass` on component groups (e.g. `QList`, `QTabs` etc.) will apply to active components they contain. `activeClass` on individual components (e.g. `QItem`, `QTab` etc.) will overwrite `activeClass` from their containing group.
activeStyle
?: string = undefined
Styles to add when the component (or its associated route) is active. `activeStyle` on component groups (e.g. `QList`, `QTabs` etc.) will apply to active components they contain. `activeStyle` on individual components (e.g. `QItem`, `QTab` etc.) will overwrite `activeStyle` from their containing group.
badgeAriaLabel
?: string = undefined
Accessible badge description announced after the destination label. Provide this whenever the badge conveys information, and always for an otherwise silent dot badge (for example, `"New notification"`).
dense
?: boolean = undefined
Uses compact drawer rows. Inherits a containing QList's dense setting when omitted.
disabled
?: boolean = false
Puts the component into a disabled state, which prevents user interaction.
href
?: string = undefined
Makes the component navigational, typically used for links to set the URL or route it should navigate to.
icon
?: MaterialSymbol | Snippet = undefined
Optional in drawers; required in navigation bars and railbars. Icons are displayed at 24px. Material Symbols fill automatically when active; custom snippets should provide their own active-state treatment when needed.
label
?: string = undefined
Visible one- or two-word destination label. Every item should provide this prop or the default children snippet.
noRipple
?: boolean = false
Disables the ripple effect on click.
replace
?: boolean = false
Replaces the current entry in the browser's history rather than adding a new one. This is the same as setting the `data-sveltekit-replacestate` attribute to "true".
rippleColor
?: string = undefined
Sets the ripple effect's color for the component. If omitted, the ripple will inherit the component's text color.
target
?: HTMLAnchorAttributes["target"] = undefined
For navigational components only, sets or retrieves the window or frame at which to target content.
to
?: string = undefined
Makes the component navigational, typically used for links to set the URL or route it should navigate to. As it is the same as href, it is recommended to use href instead.

Usage

Destinations, Badges and Appearance
Put QNavbar in the navbar snippet of QLayout so content keeps clear of the bar. Use three to five stable, equal-priority destinations, each with an icon and a concise visible label. Save a stall, switch destinations, and read the update to clear its dot. Exactly one destination stays active.
Horizontal items
Top border
Custom stall icon

LANTERN LANE MARKET

Market stalls

Jasper & Clay

Folded Stories

The Warm Crumb

0 saved stalls · One unread update.

height is a minimum in pixels; the bar grows when labels need space. bordered adds its top divider, and activeColor changes the selected indicator. horizontal places labels beside icons, intended for medium-width layouts from 600px through 839px. Try it in a wider window.

Badge Content
An empty badge snippet renders a dot; plain text renders a count. Provide a badgeAriaLabel for meaningful badges, especially dots. Keep count text to four characters including a plus sign, such as 999+. In the market, Saved shows a count only when something is saved, and Updates clears its dot when opened. Custom icon snippets can draw their own active appearance; the stall icon above fills when selected. A label can come from label or the default children snippet.
Keep Navigation Predictable
Use the bar for destinations, with actions inside their content. For wider layouts, consider QRailbar; for drawer destinations and expandable groups, see QNavItem.
Accessibility

Name each QNavbar with aria-label or aria-labelledby. Keep destination labels and focus indicators visible.

Tab and Shift+Tab move between enabled destinations; Enter or Space activates them. Use href or to for navigation. Active items expose aria-current="page"; disabled items are skipped in the tab order.

Describe unread dots and counts with badgeAriaLabel instead of relying on color.

Privacy Policy