Accordion Alerts / Banner Buttons Card Collection Combo box Forms Language Layout List Navigation Other Search Social Summary box

Navigation (nav)

Hierarchical, horizontal navigation to place. To be used inside a header component.

ID Label Description Schema
search Search Expect a search component
nav_id ID Must start with a letter. Randomly generated if empty. 
                        type: string
pattern: '^[A-Za-z]+[\w\]*$'
use_megamenu Megamenu Use megamenus in the primary navigation. 
                        type: boolean
primary Primary navigation Full-height and lightweight navigation with dropdowns. 2 levels max. Links are ignored if children are present. 
                        type: array
items:
    type: object
    properties:
        title:
            type: string
        attributes:
            $ref: '#/$defs/attributes_value'
        below:
            type: object
secondary Secondary navigation 
                        type: array
items:
    type: object
    properties:
        title:
            type: string
        attributes:
            $ref: '#/$defs/attributes_value'
        below:
            type: object

                      
            id: nav
label: Navigation
description: 'Hierarchical, horizontal navigation to place. To be used inside a header component.'
group: Navigation
slots:
    search:
        id: search
        label: Search
        description: 'Expect a search component'
props:
    nav_id:
        id: nav_id
        label: ID
        description: 'Must start with a letter. Randomly generated if empty.'
        schema:
            type: string
            pattern: '^[A-Za-z]+[\w\]*$'
    use_megamenu:
        id: use_megamenu
        label: Megamenu
        description: 'Use megamenus in the primary navigation.'
        schema:
            type: boolean
    primary:
        id: primary
        label: 'Primary navigation'
        description: 'Full-height and lightweight navigation with dropdowns. 2 levels max. Links are ignored if children are present.'
        schema:
            type: array
            items:
                type: object
                properties:
                    title:
                        type: string
                    attributes:
                        $ref: '#/$defs/attributes_value'
                    below:
                        type: object
    secondary:
        id: secondary
        label: 'Secondary navigation'
        schema:
            type: array
            items:
                type: object
                properties:
                    title:
                        type: string
                    attributes:
                        $ref: '#/$defs/attributes_value'
                    below:
                        type: object
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': nav
            search:
                '@component': search
                search_id: test-search-field
            use_megamenu: true
            primary:
                -
                    title: 'Current section'
                    url: 'https://example.com'
                    is_expanded: true
                    in_active_trail: true
                    below:
                        -
                            title: '2nd level link'
                            url: 'https://example.com'
                            in_active_trail: true
                        -
                            title: '2nd level link'
                            url: 'https://example.com'
                        -
                            title: '2nd level link'
                            url: 'https://example.com'
                        -
                            title: '2nd level link'
                            url: 'https://example.com'
                        -
                            title: 'A very long navigation link that goes onto two lines'
                            url: 'https://example.com'
                        -
                            title: '2nd level link'
                            url: 'https://example.com'
                -
                    title: Home
                    url: 'https://example.com'
                    below:
                        -
                            title: '2nd level link'
                            url: 'https://example.com'
                            in_active_trail: true
                        -
                            title: '2nd level link'
                            url: 'https://example.com'
                        -
                            title: '2nd level link'
                            url: 'https://example.com'
            secondary:
                -
                    title: 'Secondary link'
                    url: 'https://example.com'
                -
                    title: 'Another secondary link'
                    url: 'https://example.com'