Quaff

QRailbar

Navigation rails keep primary destinations beside the page in a vertical bar. Expand the rail to share page space or overlay content.
FRAMEHOUSE

The Last Signal

Tonight, 18:30 · Screen 1

info QRailbar API Source
interface QRailbarProps extends HTMLAttributes<HTMLElement>
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.
expanded
?: boolean = $bindable(false)
Whether the rail is expanded. Can be bound with `bind:expanded`.
expandedWidth
?: number = 256
Width of the expanded railbar in pixels.
modal
?: boolean = false
Expand above the page with a scrim, keeping the collapsed layout space. Escape or a click on the scrim collapses the rail.
side
?: "start" | "end" | "left" | "right" = "start"
Position of the railbar. "start" and "end" follow its direction; "left" and "right" stay physical.
width
?: number = 80
Width of the collapsed railbar in pixels.
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

Collapsed and Expanded
Bind expanded to switch between a compact rail and destinations with labels beside their icons. Standard expansion resizes the page. Use a menu button with aria-expanded and aria-controls, or call expand(), collapse(), and toggle() on a component reference. Save a film or reserve a seat below, then visit Saved or Tickets. These reservations only change this example. On narrow screens, scroll the workspace horizontally.
Expanded navigation
Framehouse Friday programme

YOUR EVENING AT THE CINEMA

Programme
3 films
  • The Last Signal

    Sci-fi · 98 min

    18:30 · Screen 1

  • Paper Cities

    Animation · 84 min

    20:15 · Screen 2

  • After the Credits

    Documentary · 72 min

    21:00 · Screen 1

Save a film or reserve a seat to build your evening.

Placement and Appearance
Use side, bordered, and activeColor to fit the rail to your layout. width controls the collapsed width (80px by default); expandedWidth controls the expanded width (256px). QLayout’s view determines whether the header and footer span the rail. Try the controls, choose a film in the projection queue, or change its subtitle setting.

The default side="start" follows reading direction: left in LTR, right in RTL. Use side="end" for the opposite edge, with the matching railbarStart or railbarEnd layout snippet. Explicit left and right stay fixed, as in the projection desk below.

Rail on the right
Expanded rail
Border
Full-width header and footer
Projection desk Screen 1
The Last Signal · Subtitles on
Up next

Choose the film to cue for the next screening.

Privacy Policy