Theme:
Ui3nMobileMenu & Ui3nMobileMenuItem
Ui3nMobileMenu is a full-screen drawer container designed for mobile device navigation, featuring custom slot layouts (header, menuBody, footer) and synchronized backdrop transitions. Ui3nMobileMenuItem is a sub-component with strict generic typing and smooth micro-interactions for links.
Mobile Menu API
Props
| Name | Type | Default | Description |
|---|---|---|---|
modelValue* | boolean | — | No description provided |
width | string | undefined | — | No description provided |
withBlur | boolean | undefined | — | No description provided |
Events
| Event Name | Arguments / Value Type | Description |
|---|---|---|
update:modelValue | value: boolean | — |
Slots
| Slot Name | Scope Props (v-slot) | Description |
|---|---|---|
#header | — | Menu Header slot - section to add custom data on top of the menu |
#menuBody | — | Menu body slot - The section is where your menu items are placed |
#footer | — | Menu footer slot - section to add custm data on the bottom of menu |
CSS Variables
Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.
| Name | Default |
|---|---|
--ui3n-menu-blur-custom | 0px |
--ui3n-menu-width-custom | 240px |
Menu Item API
Props
| Name | Type | Default | Description |
|---|---|---|---|
item* | T | — | No description provided |
isActive | boolean | undefined | — | No description provided |
Events
| Event Name | Arguments / Value Type | Description |
|---|---|---|
selectItem | T | Emitted when an item is selected on the menu |
Usage Examples
Simple Mobile Menu
Demonstrates a complete menu lifecycle with full-screen slide-in animations and core navigation slots.
Simple mobile menu
Basic mobile drawer implementation using core structured sections
Custom Width & Backdrop Blur
Demonstrates container resizing using the width prop and activating an aesthetic frosted-glass look with withBlur.
Mobile menu with custom width
Resized drawer framework utilizing full backdrop blur states
Standalone Menu Items
Demonstrates static rendering of standalone item links inside a standard box wrapper.
Standalone menu items
Basic item components mapped with a plain object configuration
Home Link
User Profile
Global Settings
Interactive Navigation Group
Demonstrates dynamic active-state toggling using the isActive prop, highlighting the built-in icon physics animation (bounceOnce) upon element selection.
Interactive navigation group
Synchronized list elements executing live active style swaps
Dashboard Console
System Analytics
Financial Reports
Security Settings