Sidebar menu (sidebar_menu)

Local navigation for a subset of pages or section of a website, intended to appear in a sidebar adjacent to the main content. It can accommodate multiple categories/sub-sections in a two-level hierarchy with titles corresponding to the top level page of each sub-section. The menu summary reflects the current page, shown when the menu is collapsed in small viewports. The menu label should be the title of the site section.

🔗 External documentation.

                        type: array
items:
    type: object
    properties:
        title:
            type: string
        attributes:
            $ref: '#/$defs/attributes_value'
        below:
            type: object

                      

            id: sidebar_menu
label: 'Sidebar menu'
description: 'Local navigation for a subset of pages or section of a website, intended to appear in a sidebar adjacent to the main content. It can accommodate multiple categories/sub-sections in a two-level hierarchy with titles corresponding to the top level page of each sub-section. The menu summary reflects the current page, shown when the menu is collapsed in small viewports. The menu label should be the title of the site section. '
homepage: 'https://protocol.mozilla.org/components/detail/sidebar-menu.html'
slots:
    label:
        id: label
        label: 'Menu label'
        description: 'Displayed only when collapsed in small viewports.'
props:
    items:
        id: items
        label: 'Menu items'
        schema:
            type: array
            items:
                type: object
                properties:
                    title:
                        type: string
                    attributes:
                        $ref: '#/$defs/attributes_value'
                    below:
                        type: object
library:
    dependencies:
        - sidemenu
    id: sidebar_menu
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': sidebar_menu
            label: 'Menu label'
            items:
                -
                    title: Home
                    url: '#'
                -
                    title: Library
                    url: '#'
                    in_active_trail: true
                    below:
                        -
                            title: 'Sub 1'
                            url: '#'
                            in_active_trail: true
                        -
                            title: 'Sub 2'
                            url: '#'
                -
                    title: Data
                    url: '#'