Navigation
Available as: Web ComponentRender 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
