components / 26
marked navigation menu
navigation is a promise about what comes next. the mark confirms intent while Base UI keeps focus, hover, and positioning honest.
shadcn
npx shadcn@latest add berkantay/cheez/marked-navigation-menulive
closed · grida header with memory
pointer, keyboard, touchhover a word.
open a direction.
open a direction.
the popup changes width without changing the reading order.
layout
size
ink
character
<MarkedNavigationMenu tone="orange" size="medium" character="rushed">
<MarkedNavigationMenuList>
<MarkedNavigationMenuItem value="product">
<MarkedNavigationMenuTrigger>product</MarkedNavigationMenuTrigger>
<MarkedNavigationMenuContent layout="grid">
<MarkedNavigationMenuLink href="/marks" description="sixty gestures.">
marks
</MarkedNavigationMenuLink>
</MarkedNavigationMenuContent>
</MarkedNavigationMenuItem>
</MarkedNavigationMenuList>
<MarkedNavigationMenuViewport />
</MarkedNavigationMenu>states
hover, open, current, unavailablethe ink explains the interaction
architecture
content changes, frame remainsone viewport, three information densities
280px
480px
680px
compact
the rail scrolls; the order stays intactnarrow does not mean hidden
cz.
compact keeps the same links and keyboard model. it only changes the available surface.
reference
Base UI behavior, Cheez visualsapi
| prop | type | default | purpose |
|---|---|---|---|
value / defaultValue | unknown | null | null | controlled or uncontrolled open item |
delay / closeDelay | number | 50 | pointer intent timing in milliseconds |
orientation | "horizontal" | "vertical" | "horizontal" | keyboard navigation axis |
size | "small" | "medium" | "large" | "medium" | trigger and popup rhythm |
tone | MarkedNavigationMenuTone | "orange" | built-in ink palette |
color | string | tone color | trigger and link ink override |
compact | boolean | false | scroll-safe narrow navigation |
character | CheezCharacter | "rushed" | drawing personality |
triggerMark | CheezType | "underline" | persistent open trigger mark |
hoverMark | CheezType | "short-underline" | hover and focus mark |
frameMark | CheezType | "rounded-box" | drawn popup boundary |
Content.layout | "list" | "grid" | "featured" | "grid" | content composition |
Content.width | "small" | "medium" | "large" | "medium" | viewport width cap |
Link.active | boolean | false | current link and aria-current state |
Link.description | ReactNode | undefined | optional secondary copy |
Viewport.sideOffset | number | 12 | distance from active trigger |
behavior notes
- Base UI owns focus movement, pointer intent, escape handling, collision detection, and viewport measurement
- the root renders a nav, the list renders a ul, items render li, and links remain ordinary anchors
- open triggers redraw their mark and caret; the rest of the interface remains still
- active links receive aria-current="page" in addition to their persistent Cheez mark
- content moves through one measured viewport so layout changes do not create competing popups
- compact mode preserves every destination in a horizontal, scroll-safe rail
- framework links can replace the default anchor through Base UI composition when needed