Navigation

Available as: Web Component

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"> </spx-navigation> </div>

Properties

child-border

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

Child border.

child-border-radius

Type: stringDefault: 'var(--spx-border-radius)'CSS 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.8em'CSS variable: --spx-navigation-child-child-gap

Gap between nested child menus.

child-gap

Type: stringDefault: '0.5em'CSS 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.2em'CSS variable: --spx-navigation-child-indicator-gap

Gap between child menu indicator and text.

child-item-background

Type: stringDefault: '#ffffff'CSS variable: --spx-navigation-child-item-background

Child item background.

child-item-background-hover

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

Child item hover background.

child-item-color

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

Child item color.

child-item-color-hover

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

Child item hover color.

child-item-padding

Type: stringDefault: '0.6em 0.8em'CSS variable: --spx-navigation-child-item-padding

Child item padding.

child-placement

Type: stringDefault: 'start'CSS 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

Component font-size property.

item-transition-duration

Type: stringDefault: 'var(--spx-transition-duration)'CSS variable: --spx-navigation-item-transition-duration

Item transition-duration.

item-transition-timing-function

Type: stringDefault: 'var(--spx-transition-timing-function)'CSS variable: --spx-navigation-item-transition-timing-function

Item transition-timing-function.

item-underline

Type: boolean

Underlines all links.

item-underline-hover

Type: boolean

Underlines all links on hover.

menu

Type: string <?php spx\Get::navigation("myMenu") ?>

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: '#ffffff'CSS variable: --spx-navigation-mobile-item-background

Mobile item background.

mobile-item-background-hover

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

Mobile item hover background.

mobile-item-color

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

Mobile item color.

mobile-item-color-hover

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

Mobile item hover color.

mobile-item-nested-margin-left

Type: stringDefault: '0.8em'CSS variable: --spx-navigation-mobile-item-nested-margin-left

Mobile item nested margin-left.

mobile-item-padding

Type: stringDefault: '0.6em'CSS variable: --spx-navigation-mobile-item-padding

Mobile item padding.

mobile-placement

Type: stringDefault: 'start'CSS variable: --spx-navigation-mobile-placementChoices: 'start', 'end'

Mobile placement.

parent-item-background

Type: stringDefault: '#ffffff'CSS variable: --spx-navigation-parent-item-background

Parent item background.

parent-item-background-hover

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

Parent item hover background.

parent-item-color

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

Parent item color.

parent-item-color-hover

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

Parent item hover color.

parent-item-gap

Type: stringDefault: '0.4em'CSS variable: --spx-navigation-parent-item-gap

Gap between parent menu items.

parent-item-padding

Type: stringDefault: '0.6em'CSS variable: --spx-navigation-parent-item-padding

Parent item padding.

vertical

Type: boolean

Renders menu vertically.

Events

spxNavigationDidLoad

Fires after component has loaded.

Methods

reload

Reload component.