Navbar (navbar)

Powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

🔗 External documentation.

                        type: string

                      

                        type: string
enum:
    - default
    - fixed-top
    - fixed-bottom
    - sticky-top
    - sticky-bottom

                      

                        type: string
enum:
    - start
    - end

                      

                        type: string
enum:
    - collapse
    - offcanvas

                      

                        type: string
enum:
    - start
    - end

                      

            id: navbar
label: Navbar
description: 'Powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.'
group: Navbar
homepage: 'https://getbootstrap.com/docs/5.3/components/navbar/'
variants:
    default:
        id: default
        label: Default
    expand_sm:
        id: expand_sm
        label: 'Expand small'
    expand_md:
        id: expand_md
        label: 'Expand medium'
    expand_lg:
        id: expand_lg
        label: 'Expand large'
    expand_xl:
        id: expand_xl
        label: 'Expand extra large'
    expand_xxl:
        id: expand_xxl
        label: 'Expand extra extra large'
    dark:
        id: dark
        label: 'Dark (deprecated)'
    dark__expand_sm:
        id: dark__expand_sm
        label: 'Dark expand small (deprecated)'
    dark__expand_md:
        id: dark__expand_md
        label: 'Dark expand medium (deprecated)'
    dark__expand_lg:
        id: dark__expand_lg
        label: 'Dark expand large (deprecated)'
    dark__expand_xl:
        id: dark__expand_xl
        label: 'Dark expand extra large (deprecated)'
    dark__expand_xxl:
        id: dark__expand_xxl
        label: 'Dark expand extra extra large (deprecated)'
slots:
    brand:
        id: brand
        label: Brand
    navigation:
        id: navigation
        label: Navigation
        description: 'Navigation elements (brand, text, etc.) displayed even on small screens.'
    navigation_collapsible:
        id: navigation_collapsible
        label: 'Navigation collapsible'
        description: 'Navigation elements (menu links, etc.) displayed on collapsible dropdown on small screens.'
    offcanvas_label:
        id: offcanvas_label
        label: 'Offcanvas label'
        description: 'When using the offcanvas feature, used for labelling.'
props:
    navbar_id:
        id: navbar_id
        label: ID
        description: 'Must start with a letter. Randomly generated if empty.'
        schema:
            type: string
    placement:
        id: placement
        label: Placement
        schema:
            type: string
            enum:
                - default
                - fixed-top
                - fixed-bottom
                - sticky-top
                - sticky-bottom
    toggler_position:
        id: toggler_position
        label: 'Toggler position'
        description: 'Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler'
        schema:
            type: string
            enum:
                - start
                - end
    toggle_action:
        id: toggle_action
        label: 'Toggle action'
        description: 'Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin.'
        schema:
            type: string
            enum:
                - collapse
                - offcanvas
    offcanvas_position:
        id: offcanvas_position
        label: 'Offcanvas position'
        schema:
            type: string
            enum:
                - start
                - end
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': navbar
            brand:
                -
                    '@element': img
                    width: 40px
                    height: 32px
                    src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNDA4Ij48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImJzLWxvZ28tYSIgeDE9Ijc2LjA3OSIgeDI9IjUyMy40OCIgeTE9IjEwLjc5OCIgeTI9IjM2NS45NDUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjOTAxM2ZlIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNjYxMGYyIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImJzLWxvZ28tYiIgeDE9IjE5My41MDgiIHgyPSIyOTMuNTE0IiB5MT0iMTA5Ljc0IiB5Mj0iMjc4Ljg3MiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNmZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmMWU1ZmMiLz48L2xpbmVhckdyYWRpZW50PjxmaWx0ZXIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBpZD0iYnMtbG9nby1jIiB3aWR0aD0iMTk3IiBoZWlnaHQ9IjI0OSIgeD0iMTYxLjkwMSIgeT0iODMuNDU3IiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz48ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiLz48ZmVPZmZzZXQgZHk9IjQiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI4Ii8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjE1IDAiLz48ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3ciLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz48L2ZpbHRlcj48L2RlZnM+PHBhdGggZmlsbD0idXJsKCNicy1sb2dvLWEpIiBkPSJNNTYuNDgxIDUzLjMyQzU1LjUxNSAyNS41OCA3Ny4xMjggMCAxMDYuMzQyIDBoMjk5LjM1M2MyOS4yMTQgMCA1MC44MjcgMjUuNTggNDkuODYxIDUzLjMyLS45MjggMjYuNjQ3LjI3NyA2MS4xNjUgOC45NjQgODkuMzEgOC43MTUgMjguMjMyIDIzLjQxMSA0Ni4wNzcgNDcuNDggNDguMzd2MjZjLTI0LjA2OSAyLjI5My0zOC43NjUgMjAuMTM4LTQ3LjQ4IDQ4LjM3LTguNjg3IDI4LjE0NS05Ljg5MiA2Mi42NjMtOC45NjQgODkuMzExLjk2NiAyNy43MzktMjAuNjQ3IDUzLjMxOS00OS44NjEgNTMuMzE5SDEwNi4zNDJjLTI5LjIxNCAwLTUwLjgyNy0yNS41OC00OS44Ni01My4zMTkuOTI3LTI2LjY0OC0uMjc4LTYxLjE2Ni04Ljk2Ni04OS4zMTFDMzguODAyIDIzNy4xMzggMjQuMDcgMjE5LjI5MyAwIDIxN3YtMjZjMjQuMDY5LTIuMjkzIDM4LjgwMi0yMC4xMzggNDcuNTE2LTQ4LjM3IDguNjg4LTI4LjE0NSA5Ljg5My02Mi42NjMgOC45NjUtODkuMzF6Ii8+PHBhdGggZmlsbD0idXJsKCNicy1sb2dvLWIpIiBmaWx0ZXI9InVybCgjYnMtbG9nby1jKSIgc3Ryb2tlPSIjZmZmIiBkPSJNMjY3LjEwMyAzMTIuNDU3YzQ3LjI5NyAwIDc1Ljc5OC0yMy4xNTggNzUuNzk4LTYxLjM1NSAwLTI4Ljg3My0yMC4zMzYtNDkuNzc2LTUwLjUzMi01My4wODV2LTEuMjAzYzIyLjE4NS0zLjYwOSAzOS41OTQtMjQuMjExIDM5LjU5NC00Ny4yMTkgMC0zMi43ODMtMjUuODgyLTU0LjEzOC02NS4zMjItNTQuMTM4aC04OC43NHYyMTdoODkuMjAyem0tNTQuNjkyLTE4OS40OGg0NS45MTFjMjQuOTU4IDAgMzkuMTMxIDExLjEyOCAzOS4xMzEgMzEuMjc5IDAgMjEuNTA1LTE2LjQ4NCAzMy41MzUtNDYuMzcyIDMzLjUzNWgtMzguNjd2LTY0LjgxNHptMCAxNjEuOTYxdi03MS40MzFoNDUuNjAyYzMyLjY2MSAwIDQ5LjYwOCAxMi4wMyA0OS42MDggMzUuNDkgMCAyMy40NTktMTYuNDg0IDM1Ljk0MS00Ny42MDUgMzUuOTQxaC00Ny42MDV6Ii8+PC9zdmc+Cg=='
                -
                    '@element': a
                    '@content': Brand
                    href: '#'
            navigation:
                '@element': span
                '@content': Text
                class:
                    - navbar-text
            navigation_collapsible:
                '@component': navbar_nav
                '@variant': default
                items:
                    -
                        title: Home
                        url: 'https://example.com'
                    -
                        title: Library
                        url: 'https://example.com'
                        below:
                            0:
                                title: 'Dropdown header'
                                link_attributes:
                                    class: [dropdown-header]
                            1:
                                title: 'Sub 1'
                                url: 'https://example.com'
                            3:
                                title: 'Sub 2 after divider'
                                url: 'https://example.com'
                            4:
                                title: 'Dropdown text'
                    -
                        title: Data
            offcanvas_label: Offcanvas
            placement: default
            toggler_position: end
            toggle_action: collapse
            offcanvas_position: end