Navigation app launcher
An app launcher provides navigation for applications related to the application the user is currently viewing.
An app launcher is used to organise navigation across different applications related or relevant to the current application. The current application shows as active in the app launcher. Each application displayed has a
Product icon as well as a label that gives clear and concise direction. Note that if the label is longer than the maximum width, it will be truncated and should have a tooltip provided.
- Do not use
System iconsin the app launchers.
- Do not scroll within the app launcher.
- Do not place the app launcher outside of the viewport.
- Do not list more than three app buttons across the app launcher.
- Do not change the width of the listing.
- Do not shrink text size to fit a label on a single line.
- Do not wrap a label over two lines.
When the placeholder icon is replaced with your product icon of choice, the colours will be updated. You will have to manually change them back to the correct colour.
- Enabled state should use
- Disabled state should use
- Active state should use
- Focus state should use
- Hover state should use
- Pressed state should use