arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(NavigationMenu): add collapsed prop

Browse Source
This commit is contained in:
Benjamin Canac
2025-01-16 16:34:36 +01:00
parent 931211a634
commit 3fc2210e03
5 changed files with 92 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
playground/app/pages/components/navigation-menu.vue
View File

@@ -10,9 +10,13 @@ const highlightColor = ref()
const variant = ref(theme.defaultVariants.variant)
const orientation = ref('vertical' as const)
const highlight = ref(true)
const collapsed = ref(false)
const items = [
[{
label: 'Link',
type: 'label' as const
}, {
label: 'Documentation',
icon: 'i-lucide-book-open',
badge: 10,
@@ -40,33 +44,33 @@ const items = [
defaultOpen: true,
children: [{
label: 'Link',
icon: 'i-lucide-file',
icon: 'i-lucide-link',
description: 'Use NuxtLink with superpowers.',
to: '/components/link'
}, {
label: 'Modal',
icon: 'i-lucide-file',
description: 'Display a modal within your application.',
icon: 'i-lucide-square',
description: 'Display a modal dialog overlay for important content.',
to: '/components/modal'
}, {
label: 'NavigationMenu',
icon: 'i-lucide-file',
icon: 'i-lucide-list',
description: 'Display a list of links.',
to: '/components/navigation-menu',
trailingIcon: 'i-lucide-check'
}, {
label: 'Pagination',
icon: 'i-lucide-file',
icon: 'i-lucide-parking-meter',
description: 'Display a list of pages.',
to: '/components/pagination'
}, {
label: 'Popover',
icon: 'i-lucide-file',
icon: 'i-lucide-message-circle',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/components/popover'
}, {
label: 'Progress',
icon: 'i-lucide-file',
icon: 'i-lucide-loader',
description: 'Show a horizontal bar to indicate task progression.',
to: '/components/progress'
}]
@@ -89,12 +93,14 @@ const items = [
<USelect v-model="color" :items="colors" placeholder="Color" />
<USelect v-model="variant" :items="variants" placeholder="Variant" />
<USelect v-model="orientation" :items="orientations" placeholder="Orientation" />
<USwitch v-model="collapsed" label="Collapsed" />
<USwitch v-model="highlight" label="Highlight" />
<USelect v-model="highlightColor" :items="colors" placeholder="Highlight color" />
</div>
<UNavigationMenu
arrow
:collapsed="collapsed"
:items="items"
:color="color"
:variant="variant"
@@ -102,7 +108,7 @@ const items = [
:highlight="highlight"
:highlight-color="highlightColor"
:class="highlight && 'data-[orientation=horizontal]:border-b border-[var(--ui-border)]'"
class="data-[orientation=vertical]:w-48"
class="data-[orientation=vertical]:data-[collapsed=false]:w-48"
/>
</div>
</template>

16
src/runtime/components/NavigationMenu.vue
View File

@@ -61,6 +61,12 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'm
* @defaultValue 'horizontal'
*/
orientation?: NavigationMenuRootProps['orientation']
/**
* Collapse the navigation menu to only show icons.
* Only works when `orientation` is `vertical`.
* @defaultValue false
*/
collapsed?: boolean
/** Display a line next to the active item. */
highlight?: boolean
highlightColor?: NavigationMenuVariants['highlightColor']
@@ -173,6 +179,7 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: N
const ui = computed(() => navigationMenu({
orientation: props.orientation,
collapsed: props.collapsed,
color: props.color,
variant: props.variant,
highlight: props.highlight,
@@ -190,7 +197,10 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active, disabled: !!item.disabled })" />
</slot>
<span v-if="get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
<span
v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
:class="ui.linkLabel({ class: props.ui?.linkLabel })"
>
<slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="(item as T)" :active="active" :index="index">
{{ get(item, props.labelKey as string) }}
</slot>
@@ -198,7 +208,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
<UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: props.ui?.linkLabelExternalIcon, active })" />
</span>
<span v-if="item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
<span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
<slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="(item as T)" :active="active" :index="index">
<UBadge
v-if="item.badge"
@@ -216,7 +226,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
</slot>
</DefineItemTemplate>
<NavigationMenuRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
<NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.class, props.ui?.root] })">
<template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
<NavigationMenuList :class="ui.list({ class: props.ui?.list })">
<component

20
src/theme/navigation-menu.ts
View File

@@ -60,9 +60,7 @@ export default (options: Required<ModuleOptions>) => ({
},
vertical: {
root: 'flex-col',
link: 'flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0',
childList: 'ms-5 border-s border-[var(--ui-border)]',
childItem: 'ps-1.5 -ms-px'
link: 'flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0'
}
},
active: {
@@ -87,6 +85,9 @@ export default (options: Required<ModuleOptions>) => ({
},
level: {
true: ''
},
collapsed: {
true: ''
}
},
compoundVariants: [{
@@ -216,6 +217,19 @@ export default (options: Required<ModuleOptions>) => ({
class: {
link: 'after:bg-[var(--ui-bg-inverted)]'
}
}, {
orientation: 'vertical',
collapsed: false,
class: {
childList: 'ms-5 border-s border-[var(--ui-border)]',
childItem: 'ps-1.5 -ms-px'
}
}, {
orientation: 'vertical',
collapsed: true,
class: {
link: 'px-1.5'
}
}],
defaultVariants: {
color: 'primary',

48
test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
View File

@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`NavigationMenu > renders with arrow correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -47,7 +47,7 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
`;
exports[`NavigationMenu > renders with as correctly 1`] = `
"<section aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<section aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -91,7 +91,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
`;
exports[`NavigationMenu > renders with class correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between w-48">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between w-48">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -135,7 +135,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
`;
exports[`NavigationMenu > renders with custom slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -179,7 +179,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
`;
exports[`NavigationMenu > renders with item slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -217,7 +217,7 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
`;
exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -261,7 +261,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
`;
exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -305,7 +305,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
`;
exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -343,7 +343,7 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
`;
exports[`NavigationMenu > renders with items correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -387,7 +387,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
`;
exports[`NavigationMenu > renders with labelKey correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -431,7 +431,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
`;
exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -475,7 +475,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
`;
exports[`NavigationMenu > renders with neutral variant link highlight correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -519,7 +519,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
`;
exports[`NavigationMenu > renders with neutral variant link highlight neutral correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -563,7 +563,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
`;
exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -607,7 +607,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
`;
exports[`NavigationMenu > renders with neutral variant pill highlight correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -651,7 +651,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
`;
exports[`NavigationMenu > renders with neutral variant pill highlight neutral correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -695,7 +695,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
`;
exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
<div style="position: relative;">
<ul class="isolate min-w-0" data-orientation="vertical">
<li data-menu-item="" class="min-w-0">
@@ -741,7 +741,7 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
`;
exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -785,7 +785,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
`;
exports[`NavigationMenu > renders with primary variant link highlight correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -829,7 +829,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
`;
exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -873,7 +873,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
`;
exports[`NavigationMenu > renders with primary variant pill highlight correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -917,7 +917,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
`;
exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -961,7 +961,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
`;
exports[`NavigationMenu > renders with ui correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -1005,7 +1005,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
`;
exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>

48
test/components/__snapshots__/NavigationMenu.spec.ts.snap
View File

@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`NavigationMenu > renders with arrow correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -47,7 +47,7 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
`;
exports[`NavigationMenu > renders with as correctly 1`] = `
"<section aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<section aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -91,7 +91,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
`;
exports[`NavigationMenu > renders with class correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between w-48">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between w-48">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -135,7 +135,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
`;
exports[`NavigationMenu > renders with custom slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -179,7 +179,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
`;
exports[`NavigationMenu > renders with item slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -217,7 +217,7 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
`;
exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -261,7 +261,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
`;
exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -305,7 +305,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
`;
exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -343,7 +343,7 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
`;
exports[`NavigationMenu > renders with items correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -387,7 +387,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
`;
exports[`NavigationMenu > renders with labelKey correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -431,7 +431,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
`;
exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -475,7 +475,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
`;
exports[`NavigationMenu > renders with neutral variant link highlight correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -519,7 +519,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
`;
exports[`NavigationMenu > renders with neutral variant link highlight neutral correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -563,7 +563,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
`;
exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -607,7 +607,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
`;
exports[`NavigationMenu > renders with neutral variant pill highlight correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -651,7 +651,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
`;
exports[`NavigationMenu > renders with neutral variant pill highlight neutral correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -695,7 +695,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
`;
exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
<div style="position: relative;">
<ul class="isolate min-w-0" data-orientation="vertical">
<li data-menu-item="" class="min-w-0">
@@ -741,7 +741,7 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
`;
exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -785,7 +785,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
`;
exports[`NavigationMenu > renders with primary variant link highlight correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -829,7 +829,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
`;
exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -873,7 +873,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
`;
exports[`NavigationMenu > renders with primary variant pill highlight correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -917,7 +917,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
`;
exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -961,7 +961,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
`;
exports[`NavigationMenu > renders with ui correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>
@@ -1005,7 +1005,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
`;
exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"></li>