Quaff

Navigation Items

Navigation items link to destinations in drawers, bars, and rails. Add active indicators and badges, or organize drawer links under expandable headings.

Kite mail

Viewing starred

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.
info QNavGroup API Source
interface QNavGroupProps extends HTMLAttributes<HTMLDivElement>
caption
?: string = undefined
The caption, displayed below the label in the header.
defaultOpened
?: boolean = false
Whether the expansion item is initially expanded.
dense
?: boolean = false
Use the dense style for the expansion item, reducing its height.
disabled
?: boolean = false
Puts the component into a disabled state, which prevents user interaction.
duration
?: number = undefined
Duration for the expansion animation in milliseconds. Defaults to 300ms, or 350ms inside an expressive list.
expandIcon
?: MaterialSymbol = "arrow_drop_down"
The icon to use as the toggle icon for the expansion item. If not provided, a chevron icon will be used.
expandIconToggle
?: boolean = false
Makes the toggle icon the trigger for the expansion item instead of the whole header. Linked items always use a separate toggle so the link and disclosure remain sibling actions.
expandedIcon
?: MaterialSymbol = undefined
The icon to use as the collapse icon for the expanded item. If not provided, the expandIcon will be rotated 180 degrees when the item is expanded.
hideExpandIcon
?: boolean = false
Hides the decorative expand icon when the whole header is the trigger. A separate or linked disclosure control remains visible so the panel stays operable.
href
?: string = undefined
Makes the component navigational, typically used for links to set the URL or route it should navigate to.
icon
?: MaterialSymbol = undefined
The icon to display in the header of the expansion item.
label
?: string = undefined
The text to be displayed in the component. When applicable, will overwrite the children snippet content.
name
?: string = undefined
Register the expansion item into a group, closing other items in the group when this one is opened. Groups are scoped to the containing QList.
noRipple
?: boolean = false
Disables the ripple effect on the expansion item. This is useful when the item is used as a link and you want to prevent the ripple effect.
noRotateExpandIcon
?: boolean = false
Prevents the rotation of the expand icon when the item is expanded. This is useful when using a custom icon that does not need to be rotated.
onExpandIconClick
?: MouseEventHandler<HTMLElement> = undefined
Event triggered when the expansion icon is clicked.
onclick
?: MouseEventHandler<HTMLElement> = undefined
Event triggered when the expansion item is clicked.
onkeydown
?: KeyboardEventHandler<HTMLElement> = undefined
Event triggered when a key is pressed on the expansion item header.
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".
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.
toggleAriaLabel
?: string = undefined
Overrides the accessible label of a separate expand/collapse button. By default, a state-aware label is generated from the item label.
value
?: boolean = $bindable(defaultOpened)
The bound value of the component.

Usage

Drawer Destinations
Place QNavItem in a QList tag="nav" inside QDrawer. Use to or href for links; the current route gets its active style and aria-current automatically. Set active to control selection yourself. Icons are optional in drawers; include them in bars and rails.
Explore navigation
Expandable Groups
QNavGroup provides a nested navigation list under a collapsible heading. Use it inside a drawer’s QList. Use defaultOpened for an initially expanded group, or bind value to control it. The group's children inherit the outer list's dense setting.
Compact navigation
Tempo studio
TEMPO STUDIO
Bookings

Keep track of who's joining.

8 of 12 places reserved
Privacy Policy