Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

Command Bar

Command Bar is a floating action bar for contextual commands on the current page state. Use it when users select rows, files, cards, objects, or other items and need quick actions such as edit, delete, archive, move, export, or share.

Use it for:
  • Showing a short context label, such as 2 selected.
  • Presenting compact actions for the selected items or active context.
  • Grouping related actions with ngs-command-bar-divider.
  • Showing optional shortcut hints on individual commands.

Do not use Command Bar as a command palette, search UI, dropdown menu, header toolbar, navigation bar, autocomplete, or normal form action row. It is for contextual actions that appear only when a page or region has an active selection or temporary command state.

The NgStarter Angular Command Bar component lets you show a floating contextual action bar for selected items or temporary page state. Use when rows, files, cards, canvas objects, or other page items are selected and users need quick actions such as edit, delete, archive, move, export, or share. It includes examples for Basic Command Bar.

Basic Command Bar

Use Command Bar to show contextual actions when a page, table, list, or canvas has an active selection.

2 selected
Edit
e
Delete
d