1.5.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.

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 CSS classes for the inner hidden dropdown <ul> list.

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")))