Nav (nav)

The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

🔗 External documentation.

                        type: string
enum:
    - ul
    - ol
    - nav

                      

            id: nav
label: Nav
description: 'The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.'
group: 'Navs and tabs'
homepage: 'https://getbootstrap.com/docs/5.3/components/navs-tabs/'
variants:
    default:
        id: default
        label: Default
    tabs:
        id: tabs
        label: Tabs
    tabs__fill:
        id: tabs__fill
        label: Tabs
    tabs__justified:
        id: tabs__justified
        label: Tabs
    pills:
        id: pills
        label: Pills
    pills__fill:
        id: pills__fill
        label: 'Pills filled'
    pills__justified:
        id: pills__justified
        label: 'Pills filled with same width'
    underline:
        id: underline
        label: Underline
slots:
    items:
        id: items
        label: 'Nav items'
        description: 'Nav items that appear inside the navigation component.'
props:
    nav_type:
        id: nav_type
        label: 'List type'
        schema:
            type: string
            enum:
                - ul
                - ol
                - nav
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': nav
            items:
                -
                    '@component': nav_item
                    active: true
                    link:
                        '@element': a
                        '@content': Active
                        href: 'https://example.com'
                -
                    '@component': dropdown
                    '@attributes':
                        class:
                            - nav-item
                    button_type: a
                    dropdown_navbar: true
                    title: Dropdown
                    content:
                        -
                            title: 'Dropdown header'
                            link_attributes:
                                class:
                                    - dropdown-header
                        -
                            title: Action
                            url: '#'
                        -
                            title: 'Dropdown item text'
                        -
                            title: 'Another action'
                            url: '#'
                        -
                            title: 'Something else here'
                            url: '#'
                        -
                            attributes:
                                foo: bar
                        -
                            title: 'Separated link'
                            url: '#'
                        -
                            title: 'Action (button)'
                            link_attributes:
                                class:
                                    - dropdown-item
                        -
                            title: 'Another action (button)'
                            link_attributes:
                                class:
                                    - dropdown-item
                        -
                            title: 'Something else here (text)'
                -
                    '@component': nav_item
                    link:
                        '@element': a
                        '@content': 'Much longer nav link'
                        href: 'https://example.com'
                -
                    '@component': nav_item
                    disabled: true
                    link:
                        '@element': a
                        '@content': Disabled
                        href: 'https://example.com'
            nav_type: ul