Header (header)

Helps users identify where they are and provides a quick, organized way to reach the main sections of a website.

🔗 External documentation.

                        type: string

                      

            id: header
label: Header
description: 'Helps users identify where they are and provides a quick, organized way to reach the main sections of a website.'
group: Layout
homepage: 'https://designsystem.digital.gov/components/header/'
variants:
    basic:
        id: basic
        label: Basic
        description: 'Orient users to a simple site.'
    extended:
        id: extended
        label: 'Extended (Default)'
        description: 'Orient users to a site with lots of sections.'
slots:
    top:
        id: top
        label: Top
        description: 'Expect a logo component'
    nav:
        id: nav
        label: Nav
        description: 'Expect a nav component'
props:
    close_icon:
        id: close_icon
        label: 'Close icon path'
        description: 'Path to close icon.'
        schema:
            type: string
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': header
            top:
                '@component': logo
                site_name: 'Project title'
            nav:
                '@component': nav
                search:
                    '@component': search
                    search_id: test-search-field
                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: Data
                        url: 'https://example.com'
                    -
                        title: 'Secondary link'
                        url: 'https://example.com'
                    -
                        title: 'Another secondary link'
                        url: 'https://example.com'
            close_icon: 'https://cdn.jsdelivr.net/npm/@uswds/uswds@3.7.0/dist/img/usa-icons/close.svg'