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