Navigation Menu
Набір посилань для навігації сайтом із підтримкою випадних меню.
Використання
Можливості
- Навігація з клавіатури стрілками та Escape
- Доступність із коректними атрибутами ARIA
- Плавні анімації та переходи
- Гнучке компонування вмісту (одна або кілька колонок)
- Підтримка прямих посилань і випадних меню
Довідник API
VoltNavigationMenuContentItem — volt-navigation-menu-content-item
| Вхід | Тип | За замовчуванням |
|---|---|---|
| disabled | boolean | false |
VoltNavigationMenuContent — volt-navigation-menu-content
| Вхід | Тип | За замовчуванням |
|---|---|---|
| orientation | 'vertical' | 'horizontal' | 'vertical' |
| wrap | boolean | false |
VoltNavigationMenuItem — volt-navigation-menu-item
| Вхід | Тип | За замовчуванням |
|---|---|---|
| value | string | — |
VoltNavigationMenuLink — a[voltNavigationMenuLink]
| Вхід | Тип | За замовчуванням |
|---|---|---|
| active | boolean | false |
| disabled | boolean | false |
VoltNavigationMenuList — volt-navigation-menu-list
| Вхід | Тип | За замовчуванням |
|---|---|---|
| wrap | boolean | false |
VoltNavigationMenuTrigger — volt-navigation-menu-trigger
| Вхід | Тип | За замовчуванням |
|---|---|---|
| content * | NgpOverlayContent<unknown> | — |
| placement | NavigationMenuPlacement | 'bottom-start' |
| offset | number | 4 |
| flip | boolean | true |
| disabled | boolean | false |
| cooldown | number | 300 |
VoltNavigationMenu — volt-navigation-menu
| Вхід | Тип | За замовчуванням |
|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' |
| showDelay | number | 200 |
| hideDelay | number | 150 |
| value | string | null | null |
| Вихід | Тип |
|---|---|
| valueChange | string | null |
Код компонента
Встановити через CLI:
npx @voltui/cli add navigation-menuTypeScript
Завантаження редактора…
Скопіюйте цей код у свій проєкт. Компонент використовує ng-primitives/navigation-menu.