Skip to content
Twentyfirst UIPro

Navigation Menu

Navigation · NavigationMenu, Button

View as Markdown

Site navigation for marketing pages: plain links and items that open a panel of links with icons and descriptions, optionally with a highlighted card.

  • Panels open on hover and on click; Escape closes the panel and returns focus to its trigger.
  • Use TopBar for app navigation inside the product and this for public pages.
Get started

Props

NavigationMenu

PropTypeNotes
itemsNavigationMenuItem[]Required
label?stringAccessible name of the navigation.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Button

PropTypeNotes
variant?"primary" | "secondary" | "soft" | "ghost" | "danger" | "danger-solid"
size?"md" | "sm"
icon?IconName
iconRight?IconName
disabled?boolean
type?"button" | "submit" | "reset"
onClick?(e: MouseEvent<HTMLButtonElement>) => void
children?ReactNode
asChild?booleanRender the single child element (a link, a router Link) with the button's look instead of a <button>.
id?string
name?stringForm field name and value, sent with the form when this button submits it.
value?string
form?stringThe id of the form this button belongs to, when it sits outside it.
title?string
tabIndex?number
autoFocus?boolean
aria-label?string
aria-labelledby?string
aria-describedby?string
aria-expanded?boolean | "true" | "false"For disclosure and menu triggers: whether what the button controls is open.
aria-controls?string
aria-haspopup?boolean | "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog"
aria-pressed?boolean | "true" | "false" | "mixed"For toggle buttons.
aria-current?boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.