Navbar (navbar)

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

🔗 External documentation.

ID Label Description Schema
brand Brand title Your company, product, or project name.
text Text Vertically centered strings of text.
items Menu items Full-height and lightweight navigation (including support for dropdowns). 
                        type: array
items:
    type: object
    properties:
        title:
            type: string
        attributes:
            $ref: '#/$defs/attributes_value'
        below:
            type: object

                      
            id: navbar
label: Navbar
description: 'Powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. '
homepage: 'https://getbootstrap.com/docs/4.6/components/navbar/'
variants:
    default:
        id: default
        label: Default
    light:
        id: light
        label: Light
    dark:
        id: dark
        label: Dark
slots:
    brand:
        id: brand
        label: 'Brand title'
        description: 'Your company, product, or project name.'
    text:
        id: text
        label: Text
        description: 'Vertically centered strings of text.'
props:
    items:
        id: items
        label: 'Menu items'
        description: 'Full-height and lightweight navigation (including support for dropdowns).'
        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': navbar
            brand: 'Brand title'
            text: ' Navbar text with an inline element '
            items:
                -
                    title: Home
                    url: '#'
                -
                    title: Library
                    url: '#'
                    below:
                        -
                            title: 'Sub 1'
                            url: '#'
                        -
                            title: 'Sub 2'
                            url: '#'
                -
                    title: Data

Default ( default )

Light ( light )

Dark ( dark )