Navigation

Available as: Web ComponentShortcode

Render a complete WordPress menu with nested submenus and automatic positioning.

<div style="padding-bottom: 150px;"> <spx-navigation menu='{{ fn("spxGetNavigation", "documentation") }}' mobile="1" font-size="16px" parent-item-background="transparent" > </spx-navigation> </div>
<div style="padding-bottom: 150px;"> <spx-navigation menu='{{ fn("spxGetNavigation", "documentation") }}' mobile="9999" font-size="16px" > </spx-navigation> </div>

Properties

child-border

Type: stringDefault: 1px solid var(--spx-color-gray-200)CSS Variable: --spx-navigation-child-border

child-border-radius

Type: stringDefault: 0CSS Variable: --spx-navigation-child-border-radius

Child menu border-radius.

child-box-shadow

Type: stringDefault: 0 3px 10px 0 rgba(0,0,0,0.05)CSS Variable: --spx-navigation-child-box-shadow

Child menu box-shadow.

child-child-gap

Type: stringDefault: 0.8emCSS Variable: --spx-navigation-child-child-gap

Gap between nested child menus.

child-gap

Type: stringDefault: 0.5emCSS Variable: --spx-navigation-child-gap

Gap between top level menu items and child menus.

child-icon

Type: stringDefault: arrow-down

Indicator icon.

child-icon-type

Type: stringDefault: ionicons

Indicator icon type.

child-indicator-gap

Type: stringDefault: 0.2emCSS Variable: --spx-navigation-child-indicator-gap

Gap between child menu indicator and text.

child-item-background

Type: stringDefault: #ffffffCSS Variable: --spx-navigation-child-item-background

child-item-background-hover

Type: stringDefault: var(--spx-color-gray-100)CSS Variable: --spx-navigation-child-item-background-hover

child-item-color

Type: stringDefault: var(--spx-color-gray-700)CSS Variable: --spx-navigation-child-item-color

child-item-color-hover

Type: stringDefault: var(--spx-color-gray-900)CSS Variable: --spx-navigation-child-item-color-hover

child-item-padding

Type: stringDefault: 0.6em 0.8emCSS Variable: --spx-navigation-child-item-padding

child-placement

Type: stringDefault: startCSS Variable: --spx-navigation-child-placementChoices: start, end

Child menu placement.

font-size

Type: stringDefault: clamp(18px, 1.6vw, 20px)CSS Variable: --spx-navigation-font-size

is-mobile

Type: boolean

item-underline

Type: boolean

Underlines all links.

item-underline-hover

Type: boolean

Underlines all links on hover.

menu

Type: string

Renders a WordPress menu.

mobile

Type: numberDefault: 768

Mobile breakpoint.

mobile-icon

Type: string

Mobile button icon.

mobile-icon-type

Type: stringDefault: ionicons

Mobile button icon type.

mobile-item-background

Type: stringDefault: #ffffffCSS Variable: --spx-navigation-mobile-item-background

mobile-item-background-hover

Type: stringDefault: var(--spx-color-gray-100)CSS Variable: --spx-navigation-mobile-item-background-hover

mobile-item-color

Type: stringDefault: var(--spx-color-gray-800)CSS Variable: --spx-navigation-mobile-item-color

mobile-item-color-hover

Type: stringDefault: var(--spx-color-gray-900)CSS Variable: --spx-navigation-mobile-item-color-hover

mobile-item-nested-margin-left

Type: stringDefault: 0.8emCSS Variable: --spx-navigation-mobile-item-nested-margin-left

mobile-item-padding

Type: stringDefault: 0.6emCSS Variable: --spx-navigation-mobile-item-padding

mobile-placement

Type: stringDefault: startChoices: start, end

Mobile placement.

parent-item-background

Type: stringDefault: #ffffffCSS Variable: --spx-navigation-parent-item-background

parent-item-background-hover

Type: stringDefault: var(--spx-color-gray-100)CSS Variable: --spx-navigation-parent-item-background-hover

parent-item-color

Type: stringDefault: var(--spx-color-gray-800)CSS Variable: --spx-navigation-parent-item-color

parent-item-color-hover

Type: stringDefault: var(--spx-color-gray-900)CSS Variable: --spx-navigation-parent-item-color-hover

parent-item-gap

Type: stringDefault: 0.4emCSS Variable: --spx-navigation-parent-item-gap

Gap between parent menu items.

parent-item-padding

Type: stringDefault: 0.6emCSS Variable: --spx-navigation-parent-item-padding

vertical

Type: boolean

Renders menu vertically.

Events

spxNavigationDidLoad

Fires after component has loaded.