Next: (hygguile components notification), Previous: (hygguile components media), Up: API
Create an accessible breadcrumb trail from a list of nodes.
The trail is rendered as a <nav> with an ordered list, and the
final item is marked with aria-current="page". Breadcrumbs are
static markup and work without JavaScript.
An ordered list of link or text nodes, from root to current page.
The string shown between items. Defaults to "/".
List of symbols representing the nav wrapper CSS classes.
List of symbols representing the list CSS classes.
(breadcrumbs #:items (list (a "Home" #:href "/") (a "Docs" #:href "/docs") (span "API")))
Create a navigation link with an optional active state.
When active is true, the link also carries
aria-current="page" so assistive technology announces the current
section. Links never require JavaScript.
The link label.
The destination URL.
A boolean marking this link as the current page.
List of base link CSS classes.
List of symbols applied when the link is active.
List of symbols applied when the link is inactive.
(nav-link "Pricing" #:href "/pricing")
Create a narrow icon rail for a primary navigation.
Each item is a triple, (icon label href): the icon is what is
drawn, and the label is what assistive technology reads and what a mouse
reader sees in the browser’s own tooltip. A rail is the right shape for
a desktop application with a persistent set of destinations and no room
for words; the labels are still there in the markup, which is what keeps
it usable.
A list of (icon label href) triples.
The accessible name of the navigation region.
The href of the current page.
Extra classes for the rail.
(nav-rail #:items '((house "Home" "/") (gear "Settings" "/settings")))
Create a top navigation bar shell.
The bar is a frosted glass surface like every other one in the
framework: it is built by glass-panel, which owns the frost (the
translucent tint and the backdrop blur), so the tint in
navbar-classes is not the bar’s to invent. What the bar owns is
its silhouette – it spans the viewport, so it has no rounding, no
border and no padding of the panel’s own, and its layout lives in
navbar-classes.
The navigation content, typically a list of nav-link elements.
An optional brand/logo node shown at the start of the bar.
A boolean pinning the bar to the top of the viewport. Defaults to true.
List of symbols representing the bar’s layout and place. A colour utility among them replaces the panel’s tint, so a bar can recolour its own glass.
(navbar (list (nav-link "Home" #:href "/" #:active #t)) #:brand "Hygguile")
Create page navigation for a paginated result set.
The current page number, starting at 1.
The total number of pages.
The URL prefix each page number is appended to. Defaults to "#".
The label for the previous-page link.
The label for the next-page link.
List of symbols representing the nav wrapper CSS classes.
List of symbols representing a page link’s base CSS classes.
List of symbols highlighting the current page link.
(pagination #:current 2 #:total 5 #:base-url "/blog?page=")
Create a rail of links to the sections of one page.
A page whose sections are stacked one under another is hard to move around in, and a table of contents that scrolls away is no help once a reader is past it. This rail is that list of links, frosted so it holds its own over whatever it passes, and sticky from the small breakpoint up: any section stays one tap away, and each link is an ordinary anchor, so it works with JavaScript disabled and can be bookmarked or shared.
A list of (id . label) pairs, in the order the rail should show
them. Each id is the identifier of the section it points at.
The accessible name of the rail, read out by assistive technology.
Whether the rail follows the page from the small breakpoint up.
Whether the rail marks the section a reader is currently in. The marking is done by the framework’s scroll-spy script (a progressive enhancement), and the attribute it needs is written only when the page asks for it. Defaults to true.
List of base CSS classes for the <nav>.
List of CSS classes for the wrapping <ul>.
List of CSS classes for every link.
List of CSS classes applied to the link of the current section.
List of CSS classes applied to the other links.
(section-nav '((buttons . "Buttons") (forms . "Forms")))
Create a vertical navigation sidebar, collapsing to a plain list on phones.
A sidebar is a page’s own table of contents for an application: a brand
at the top, one or more groups of links, and an optional footer (usually
a settings link or an account block). It is a real <nav> with a
label, each link is an ordinary anchor, and the current page is marked
with aria-current. From the large breakpoint up it can stick
beside the content; below it, it is simply a list above the page.
An optional node shown at the top.
A list of (heading . items) pairs. Each item is either a
(label . href) pair or a node built with sidebar-link.
An optional node shown at the bottom.
The accessible name of the navigation region.
The href of the current page, used to mark the active link.
Whether the sidebar sticks from the large breakpoint up.
Extra classes for the sidebar.
(sidebar #:brand "LucidPlan"
#:current "/projects"
#:sections '(("Work" ("Projects" . "/projects")
("Reports" . "/reports"))
("Account" ("Settings" . "/settings"))))
Create one link of a sidebar, with an optional icon and badge.
The link marks the page it is on with aria-current="page", so a
screen reader announces the current item the same way the stylesheet
paints it.
The link text.
The destination.
An optional Phosphor icon name shown before the label.
Whether this is the current page.
An optional short count or label shown at the end of the row.
Extra classes for the link.
(sidebar-link "Settings" #:href "/settings" #:icon 'gear)
Describe a single tab for use with tabs.
A short, group-unique identifier used to bind the tab, its label and its panel.
The visible label shown on the tab button.
The panel content fragments.
(tab #:id "billing" #:label "Billing" #:content (list (p "Invoices")))
Create a JavaScript-free tabbed interface.
Each tab is a hidden radio input paired with a visible label; selecting
a label reveals the matching panel purely through CSS (:checked
and :has). This means the component remains fully functional
with JavaScript disabled and is keyboard accessible, since the
underlying controls are native form elements.
A list of tab descriptors.
An optional group identifier; a unique one is generated when omitted.
The id of the tab selected initially. Defaults to the first tab.
List of symbols representing the wrapper CSS classes.
(tabs #:tab-items (list (tab #:id "a" #:label "A" #:content (list (p "A")))
(tab #:id "b" #:label "B" #:content (list (p "B")))))
Create the ordered steps of a multi-step form or a checkout.
The list is a real <ol>, because the order is the point, and the
step the reader is on carries aria-current="step". Steps before
it are marked complete, steps after it are marked upcoming, and every
step that has an href is a link so a reader can go back. Nothing here
needs a script: the server knows which step it rendered, and that is the
state the page shows.
A list of steps, each a label string or a (label . href) pair.
The 1-based index of the current step, or its label.
The accessible name of the navigation region.
'horizontal (default) or 'vertical.
Whether each step shows its number (or a check when complete).
Extra classes for the wrapper.
(wizard #:steps '(("Cart" . "/cart") ("Address") ("Payment"))
#:current 2)
Next: (hygguile components notification), Previous: (hygguile components media), Up: API