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

feat(NavigationMenu): add item-content slot

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-31 11:27:52 +01:00
parent d980115408
commit b5ca0d96f1
5 changed files with 156 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/content/3.components/navigation-menu.md
View File

@@ -560,6 +560,7 @@ You will have access to the following slots:
- `#{{ item.slot }}-leading`{lang="ts-type"}
- `#{{ item.slot }}-label`{lang="ts-type"}
- `#{{ item.slot }}-trailing`{lang="ts-type"}
- `#{{ item.slot }}-content`{lang="ts-type"}
::component-example
---
@@ -568,7 +569,21 @@ name: 'navigation-menu-custom-slot-example'
::
::tip{to="#slots"}
You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
You can also use the `#item`, `#item-leading`, `#item-label`, `#item-trailing` and `#item-content` slots to customize all items.
::
### With content slot
Use the `#item-content` slot or the `slot` property (`#{{ item.slot }}-content`) to customize the content of a specific item.
::component-example
---
name: 'navigation-menu-content-slot-example'
---
::
::note
In this example, we add the `sm:w-[var(--radix-navigation-menu-viewport-width)]` class on the `viewport` to have a dynamic width. This requires to set a width on the content's first child.
::
## API