made for Nordcraft

Toolbar

A container component that groups and manages a set of controls such as buttons, or toggle groups. Implements proper keyboard navigation and ARIA attributes to ensure accessibility when working with grouped controls.

  • Full keyboard navigation

Example

Architecture

zcore-toolbar
Slot: default Here you can place zcore-toggle-groups, zcore-separators and any interactive elements like buttons or links.

Reference

  • Toolbar

    The root container that manages the state and behavior of the toolbar system. Coordinates keyboard interactions and focus management between the grouped controls.

    • Attributes

      • aria-label
        string
        /
        default: -

        Accessible label for the toolbar when a visible label is not present. Essential for proper screen reader identification.

      • aria-labelled-by
        string
        /
        default: -

        References the ID of the element that labels the toolbar.

      • direction
        enum
        /
        default: ltr

        The reading direction of the toolbar. Affects keyboard navigation and visual presentation of the controls.

      • id
        string
        /
        default: -

        ID that is forwarded to the underlying container for DOM manipulation.

      • loop
        boolean
        /
        default: true

        When true, keyboard navigation will loop from last item to first and vice versa.

      • orientation
        enum
        /
        default: horizontal

        The orientation of the toolbar. Affects layout and keyboard navigation behavior.

    • Classes

      • orientation-vertical

        Applied when the toolbar's orientation is vertical.

Keyboard

  • Tab

    Moves focus to the first focusable control in the toolbar.

  • Space

    When focus is on a control, activates or triggers the focused control.

  • Enter

    When focus is on a control, activates or triggers the focused control.

  • When orientation is horizontal, moves focus to the next control. When focus is on the last control, moves to the first control if loop is enabled.

  • When orientation is horizontal, moves focus to the previous control. When focus is on the first control, moves to the last control if loop is enabled.

  • When orientation is vertical, moves focus to the previous control. When focus is on the first control, moves to the last control if loop is enabled.

  • When orientation is vertical, moves focus to the next control. When focus is on the last control, moves to the first control if loop is enabled.

  • Home

    Moves focus to the first control in the toolbar.

  • End

    Moves focus to the last control in the toolbar.