Toolbar

Toolbar is a persistent command area for a page, panel, table, editor, canvas, or workspace surface. Use it to group a local title, short navigation, and frequently used actions with built-in responsive overflow. Use CommandBar for floating actions on selected items, Menu for dropdown command lists, and Sidebar, Sidenav, or Navigation for primary app navigation.

The NgStarter Angular Toolbar component lets you provide a persistent command area for a page, panel, table, editor, canvas, or workspace surface. Use ngs-toolbar when a local surface needs a title, short local navigation, and frequently used actions in a stable horizontal or multi-row command area. It includes examples for Basic Toolbar, Multi-row Toolbar, Toolbar with items, and Responsive Toolbar with Overflow Menu.

Basic Toolbar

Use a basic toolbar when a local surface needs a title and a small set of always-visible actions.

Multi-row Toolbar

Use toolbar rows when the command area needs more than one horizontal line, for example a title row and a secondary controls row.

Toolbar with items

Wrap responsive actions in toolbar items so the toolbar can measure them and move actions into overflow when space is limited.

Responsive Toolbar with Overflow Menu

Use the responsive overflow behavior for dense action bars on tables, panels, editors, and other work surfaces that must stay usable on narrow widths.

Resize the window to see items moving to the overflow menu.

Responsive Toolbar Navigation

Use toolbar navigation for short local links inside a toolbar. Use Sidebar, Sidenav, or Navigation for primary app navigation.