Nav

Navigation bar with optional mobile menu (slide/fullscreen/dropdown) and Button children or buttons[] data.

Required Props: idSupports Children: Button | Container

Structure

All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.

Properties

PropertyTypeDescriptionExamples
buttonsarray
Legacy/alternate inline button configs
Default: []
-
flexDirectionstring
Default flex direction for nav row (often overridden by mobile/desktop)
-
alignItemsstring
-
Default: "items-center"
-
justifyContentstring
-
Default: "justify-start"
-
gapstring
-
Default: "gap-2"
-
menuobject
Mobile/tablet menu drawer configuration
-
viewstring
Editor view helper
-
canDeleteboolean
-
Default: true
-
canEditNameboolean
-
Default: true
-
customobject
-
-
classNamestring
Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.
flex flex-col gap-space-sm py-space-lg px-container-x md:flex-rowbg-primary text-primary-content rounded-box py-3.5 px-6 font-semibold
urlstring
-
-
urlTargetstring
-
-
rolestring
-
-
aria-labelstring
-
-
aria-hiddenstring
-
-
aria-describedbystring
-
-
aria-livestring
polite | assertive | off
-
-
backgroundobject
-
-
rootobject
-
-