Quaff

QBreadcrumbs

Breadcrumbs show the current location within a hierarchy and link to earlier levels. Customize the trail with labels, icons, and separators.

THE OPEN ARCHIVE

Archive location

info QBreadcrumbs API Source
interface QBreadcrumbsProps extends HTMLAttributes<HTMLElement>
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.
activeColor
?: string = "primary"
Color to use for the active breadcrumb element.
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.
gutter
?: QBreadcrumbsGutterOptions = "sm"
Space around separators.
separator
?: StringWithSuggestions<`icon:${MaterialSymbol}`> | Snippet = "/"
Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.
separatorColor
?: string = "outline-variant"
Color to use for the separators. See to see what colors can be used.
info QBreadcrumbsEl API Source
interface QBreadcrumbsElProps extends HTMLAttributes<HTMLLIElement>
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.
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
Name of the leading icon for the breadcrumb element. The icon prop overwrites to icon slot.
label
?: string = ""
The text to be displayed in the component. When applicable, will overwrite the children snippet content.
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".
tag
?: string = "span"
Tag to use for the breadcrumb element.
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

Browse a Collection
Breadcrumbs provide a path back through a hierarchy. Open a record, then use the trail to return to its collection. Here tag="button" changes the view locally; the current location is a noninteractive span. Toggle icons and adjust separator spacing without leaving the archive.
COLLECTION · 2 RECORDS

Maps

Coastlines, contours and places in between.

Viewing Maps

Show collection icons
Custom Markers and Content
Supply a separator snippet for custom markup, an icon snippet for your own artwork, and children instead of label for richer item content. This catalog reference uses tag="strong" for its final element.
FROM THE CATALOGUE

The identifier accompanies the title when a record is shared with another researcher.

Privacy Policy