1.12.1 Procedures

Procedure: fly-out KEY: #:aria-label #:nav-class #:top-ul-class #:items ¶

Construct an outer fly-out navigation menu shell.

aria-label

The accessibility text label string assigned to the <nav> component.

nav-class

List of symbols representing CSS classes for the structural <nav> wrapper.

top-ul-class

List of symbols representing CSS classes for the top-level container <ul>.

items

A list of sub-components or list items to nest within the top-level menu container.

(fly-out #:aria-label "Main Navigation"
         #:items (list (fly-out-item "Home")))

Procedure: fly-out-item content KEY: #:li-class ¶

Construct a single leaf item within a fly-out menu.

content

The text description, link, or component fragment inside the item container.

li-class

List of symbols representing CSS classes for the wrapping <li> item.

(fly-out-item "Documentation" #:li-class '(px-2 py-2))

Procedure: fly-out-submenu KEY: #:li-class #:button-class #:ul-class #:button-content #:items ¶

Construct a fly-out sub-menu dropdown block.

The dropdown is a frosted glass surface built by glass-panel: the frost (the translucent tint and the backdrop blur) is the panel’s, so a dropdown hanging over the page shows the page through it. The menu keeps its own shape – it is absolutely placed under its trigger, and the rounding, shadow and padding stay in ul-class. It is still the same <ul> with the flyout-submenu class and the hidden attribute that fly-out.js opens and closes, so nothing about the behaviour changes.

li-class

List of symbols representing CSS classes for the wrapper <li> component.

button-class

List of symbols representing CSS classes for the trigger <button> element.

ul-class

List of symbols representing the dropdown’s own shape and layout. A colour utility among them replaces the panel’s tint.

button-content

S-expression content or fragments rendered inside the dropdown trigger button.

items

A list of nested child items (typically fly-out-item items) belonging to this sub-menu.

(fly-out-submenu #:button-content '((span "Settings"))
                 #:items (list (fly-out-item "Account Profile")))