Toolbar

Components > Content Layout > Toolbar

Use this component to...

Display buttons that apply to an entire function, display block, group box, or tab

See this component in action...

Test out this component in a hosted version of the sample app

Overview

A toolbar is a horizontal container that contains buttons and other options that are scoped to the function, a display block, a group box, or a tab.

Toolbars display in 3 primary locations:

Each function view can include an optional toolbar for the function. You can display this toolbar either below the function title or to the right of the function title.
Each display block can also include an optional toolbar. You can display this toolbar either below the display block title or to the right of the display block title.
Each group box can also include an optional toolbar. This toolbar displays below the group box title.
Likewise, each tab can also include an optional toolbar. This toolbar displays below the tab header bar, above the selected tab content.

Toolbars help you scope buttons to the containers on which they act, If there are multiple display blocks in a view and a specific element operates only on data that is contained within one of those display blocks, you should place that element into a toolbar within that display block. Otherwise, you should put that element into a toolbar at the function level. Similarly, if an element operates only on data that is contained within a group box, you should put that element into a toolbar within that group box. By scoping these options within a toolbar at the appropriate container level, you help users understand what data that option operates on.

Each function view can also have a floating toolbar, which displays at the top of the function view after the user scrolls down some. The floating toolbar is separate from the function or display block toolbars. You can add any combination of elements from the function or display block toolbars to the floating toolbar.

You can optionally group related items in a toolbar by placing a toolbar separator between different groups of items. Toolbar separators should be used sparingly, and only where a strong relationship exists between all items separated into a group.

This function toolbar contains a button group, a toolbar separator, and a button. This toolbar displays to the right of the function title.

This display block toolbar contains Save and Cancel buttons. This toolbar displays below the display block title.

This floating toolbar displays at the top of the function view after the user has scrolled down the page, keeping these elements easily accessible as the user scrolls down the page.

One common usage of toolbars is to include inputs that affect the data displayed below the toolbar. In many cases this works well, but in some cases the number and size of inputs is too large to fit within the space allocated to the toolbar. Here are a couple options that can help in this case:

Consider replacing multiple related buttons with one dropdown button that includes each of those options in its dropdown menu. This is a great way to save space in your toolbars.
Instead of displaying all of the inputs within the toolbar, consider moving most if not all of them into a modal dialog, with a button in the toolbar that displays that dialog. You should also display a summary of the current input values within the toolbar, so the user understands the data’s context.
Instead of using a date input and jha-date-picker-button for prompting for date values, consider using the jha-date-button instead. The jha-date-button component takes up less width than the input and jha-date-picker-button, making it ideal for cases where space is at a premium, including toolbars.

Development

Web component development

Component reference

rui-toolbar

Module: rui-layout - Package: @jkhy/responsive-ui-wc

Contains toolbar elements.

Name	Type	Default	Description
slot	string	''	The slot in which this toolbar displays. One of: function-toolbar-below: Use this value for a toolbar that displays at the function level, below the function title function-toolbar-right: Use this value for a toolbar that displays at the function level, to the right of the function title display-block-toolbar-below: Use this value for a toolbar that displays at the display block level, below the display block title display-block-toolbar-right: Use this value for a toolbar that displays at the display block level, to the right of the display block title group-box-toolbar-below: Use this value for a toolbar that displays at the group box level, below the group box title tab-toolbar-below: Use this value for a toolbar that displays within the selected tab content, below the tab header bar

Name

Type

Default

Description

slot

string

The slot in which this toolbar displays.

One of:

function-toolbar-below: Use this value for a toolbar that displays at the function level, below the function title
function-toolbar-right: Use this value for a toolbar that displays at the function level, to the right of the function title
display-block-toolbar-below: Use this value for a toolbar that displays at the display block level, below the display block title
display-block-toolbar-right: Use this value for a toolbar that displays at the display block level, to the right of the display block title
group-box-toolbar-below: Use this value for a toolbar that displays at the group box level, below the group box title
tab-toolbar-below: Use this value for a toolbar that displays within the selected tab content, below the tab header bar

rui-floating-toolbar

Module: rui-layout - Package: @jkhy/responsive-ui-wc

Contains toolbar elements that display at the top of the content area after the user has scrolled a specified number of pixels down the page.

Name	Type	Default	Description
displayScrollPixels	number	150	Specifies the amount in pixels the user has to scroll down the view before the floating toolbar displays. Leave this at its default value for consistency across views, unless you absolutely need to override this for a particular view. Only values greater than zero are honored.
rui-floating-toolbar-is-visible	event		Event fired when the floating toolbar visibility changes. The visible status of the toolbar is passed in the custom event’s detail.

rui-toolbar-separator

Module: rui-layout - Package: @jkhy/responsive-ui-wc

Used to separate related groups of items within a toolbar.

Name	Type	Default	Description
context	string	'content'	The context in which this toolbar separator is used in. One of: function: Used for toolbar separators in a toolbar at the function level content: Used for toolbar separators in all other toolbars

Name

Type

Default

Description

context

string

'content'

The context in which this toolbar separator is used in.

One of:

function: Used for toolbar separators in a toolbar at the function level
content: Used for toolbar separators in all other toolbars

Implementation

Begin by importing the rui-layout module into your application.

Import the module

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-layout/rui-layout-imports';

The following example implements a function toolbar that displays below the function title:

Function toolbar displayed below the function title

<rui-toolbar slot="function-toolbar-below">
    <rui-button iconType="edit" (rui-click)="startEditing()"></rui-button>
</rui-toolbar>

The following example implements a function toolbar that displays to the right of the function title:

Function toolbar displayed to the right of the function title

<rui-toolbar slot="function-toolbar-right">
    <rui-button iconType="edit" (rui-click)="startEditing()"></rui-button>
</rui-toolbar>

The following example illustrates a floating toolbar:

Floating toolbar

<rui-floating-toolbar>
    <rui-button text="Save" buttonStyle="primary" (rui-click)="saveChanges()"></rui-button>
    <rui-button text="Cancel" (rui-click)="cancelChanges()"></rui-button>
</rui-floating-toolbar>

The following example implements a display block toolbar that displays below the display block title:

Display block toolbar displayed below the display block title

<rui-display-block titleText="Customer Info">

    <!-- Toolbar below the display block title -->
    <rui-toolbar slot="display-block-toolbar-below">
        <rui-button text="Edit Name and Address" (rui-click)="editNameAndAddress()"></rui-button>
    </rui-toolbar>

    <!-- Display block content goes here -->

</rui-display-block>

The following example implements a display block toolbar that displays to the right of the display block title:

Display block toolbar displayed to the right of the display block

<rui-display-block titleText="Customer Info">

    <!-- Toolbar to the right of the display block title -->
    <rui-toolbar slot="display-block-toolbar-right">
        <rui-button text="Edit Name and Address" (rui-click)="editNameAndAddress()"></rui-button>
    </rui-toolbar>

    <!-- Display block content goes here -->

</rui-display-block>

The following example implements a group box toolbar:

Group box toolbar

<rui-group-box titleText="Accounts">

    <rui-toolbar slot="group-box-toolbar-below">
        <rui-button iconType="add-new" (rui-click)="addAccount()"></rui-button>
    </rui-toolbar>

    <!-- Group box content goes here -->

</rui-group-box>

Due to the group box layout, a group box toolbar can only display below the group box title, never to the right of it.

The following example implements a tab toolbar:

Tab toolbar

<rui-tabset>
    <rui-tab labelText="Savings Accounts">
        <rui-toolbar slot="tab-toolbar-below">
            <rui-button text="Save" buttonStyle="primary" (rui-click)="saveChanges()"></rui-button>
            <rui-button text="Cancel" (rui-click)="cancelChanges()"></rui-button>
        </rui-toolbar>
        <!-- Tab content goes here -->
    </rui-tab>

     <!-- Additional tabs go here -->

</rui-tabset>

Due to the tabset layout, a tab toolbar can only display below the tab header, never to the right of it. However, there is a slot available in the rui-tabset to accommodate additional content.

To display standalone text in a function toolbar, add the text to a span that has the rui-function-toolbar-text themed CSS class applied.

Standalone text in a toolbar

<rui-toolbar slot="function-toolbar-below">
    <span class="rui-function-toolbar-text">NANCY DAVOLIO</span>
</rui-toolbar>

Angular wrapper development

Wrapper reference

jha-function-toolbar

Module: JhaLayoutModule - Package: @jkhy/responsive-ui-angular

Contains toolbar elements for the entire function. Displays below the function title.

No properties or events

jha-function-toolbar-right

Module: JhaLayoutModule - Package: @jkhy/responsive-ui-angular

Contains toolbar elements for the entire function. Displays to the right of the function title.

No properties or events

jha-floating-toolbar

Module: JhaFloatingToolbarModule - Package: @jkhy/responsive-ui-angular

Contains toolbar elements that display at the top of the content area after the user has scrolled down the page.

Name	Type	Default	Description
jhaDisplayScrollPixels	number	150	Specifies the amount in pixels the user has to scroll down the view before the floating toolbar displays. Leave this at its default value for consistency across views, unless you absolutely need to override this for a particular view. Only values greater than zero are honored.
jhaFloatingToolbarIsVisible	event		Event fired when the floating toolbar visibility changes. The event returns either true or false noting the visible state of the toolbar.

jha-display-block-toolbar

Module: JhaLayoutModule - Package: @jkhy/responsive-ui-angular

Contains toolbar elements for a display block. Displays below the display block title.

No properties or events

jha-display-block-toolbar-right

Module: JhaLayoutModule - Package: @jkhy/responsive-ui-angular

Contains toolbar elements for a display block. Displays to the right of the display block title.

No properties or events

jha-group-box-toolbar

Module: JhaLayoutModule - Package: @jkhy/responsive-ui-angular

Contains toolbar elements for a group box. Displays below the group box title.

No properties or events

jha-tab-toolbar

Module: JhaLayoutModule - Package: @jkhy/responsive-ui-angular

Contains toolbar elements for a tab. Displays below the tab header bar, above the selected tabs content.

No properties or events

jha-toolbar-separator

Module: JhaLayoutModule - Package: @jkhy/responsive-ui-angular

Used to separate related groups of items within a toolbar.

No properties or events

Implementation

Begin by importing the JhaLayoutModule module into your application.

Import the module

// import into app.module
import { JhaLayoutModule } from '@jkhy/responsive-ui-angular/jha-layout';

@NgModule({
    imports: [
        ...
        JhaLayoutModule,
        ...
    ]
})

export class AppModule(){}

The following example implements a function toolbar that displays below the function title:

Function toolbar displayed below the function title

<jha-function-toolbar>
    <jha-button jhaText="Edit" (jhaClick)="startEditing()"></jha-button>
</jha-function-toolbar>

The following example implements a function toolbar that displays to the right of the function title:

Function toolbar displayed to the right of the function title

<jha-function-toolbar-right>
    <jha-button jhaText="Edit" (jhaClick)="startEditing()"></jha-button>
</jha-function-toolbar-right>

The following example illustrates a floating toolbar:

Floating toolbar

<jha-floating-toolbar>
    <jha-button jhaText="Save" jhaButtonStyle="Primary" (jhaClick)="saveChanges()"></jha-button>
    <jha-button jhaText="Cancel" (jhaClick)="cancelChanges()"></jha-button>
</jha-floating-toolbar>

The following example implements a display block toolbar that displays below the display block title:

Display block toolbar displayed below the display block title

<jha-display-block jhaTitle="Customer Info">

    <!-- Toolbar below the display block title -->
    <jha-display-block-toolbar>
        <jha-button jhaText="Edit Name and Address" (jhaClick)="editNameAndAddress()"></jha-button>
    </jha-display-block-toolbar>

    <!-- Display block content goes here -->

</jha-display-block>

The following example implements a display block toolbar that displays to the right of the display block title:

Display block toolbar displayed to the right of the display block

<jha-display-block jhaTitle="Customer Info">

    <!-- Toolbar to the right of the display block title -->
    <jha-display-block-toolbar-right>
        <jha-button jhaText="Edit Name and Address" (jhaClick)="editNameAndAddress()"></jha-button>
    </jha-display-block-toolbar-right>

    <!-- Display block content goes here -->

</jha-display-block>

The following example implements a group box toolbar:

Group box toolbar

<jha-group-box jhaTitle="Accounts">

    <jha-group-box-toolbar>
        <jha-button jhaIconType="AddNew" (jhaClick)="addAccount()"></jha-button>
    </jha-group-box-toolbar>

    <!-- Group box content goes here -->

</jha-group-box>

Due to the group box layout, a group box toolbar can only display below the group box title, never to the right of it.

The following example implements a tab toolbar:

Tab toolbar

<jha-tabset>
    <jha-tab jhaLabelText="Savings Accounts">
        <jha-tab-toolbar>
            <jha-button jhaText="Save" jhaButtonStyle="Primary" (jhaClick)="saveChanges()"></jha-button>
            <jha-button jhaText="Cancel" (jhaClick)="cancelChanges()"></jha-button>
        </jha-tab-toolbar>
        <!-- Tab content goes here -->
    </jha-tab>

    <!-- Additional tabs go here -->

</jha-tabset>

Due to the tabset layout, a tab toolbar can only display below the tab header, never to the right of it.

To display standalone text in a function toolbar, add the text to a span that has the jha-function-toolbar-text themed CSS class applied.

Standalone text in a toolbar

<jha-function-toolbar>
    <span class="jha-function-toolbar-text">NANCY DAVOLIO</span>
</jha-function-toolbar>

Component playground

Design

Figma design

Figma design info

You can find this component in the Components - Content Layout page in the Figma UI Kit.

Dev Component	Design Component Name
Floating toolbar	RUI / Layout / Floating Toolbar
Toolbar separator	RUI / Layout / Toolbar Separator Available values for the Context property: Function View Content
Text in function toolbar	Add text, then apply rui/toolbar as the Text Style and rui-pacific/function-title as the Color Style.
Text in display block toolbar or content toolbar	Add text, then apply rui/toolbar as the Text Style and rui-pacific/content-subtitle as the Color Style.

The function toolbar, display block toolbar, and content toolbar (used for group boxes, tabs, and other container components) are all invisible, so there are no design components for those toolbars. To design these toolbars, simply group the toolbar elements within in a single horizontal strip and vertically center them.

The floating toolbar is visible, so there is a design component for it.

All items within toolbars should be vertically centered and separated by 6 pixels of space. It can be very helpful to turn on auto layout for the group containing the toolbar elements.

You can use the toolbar separator design component to visually group related sets of toolbar elements if needed.

If you need to display text in a toolbar, see the appropriate entries in the table above.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App – Toolbars
Sample App - Toolbars – Floating Toolbar

Dev Component	Design Component Name
Floating toolbar	JHA / Layout / Floating Toolbar
Function toolbar separator	JHA / Layout / Function Toolbar Separator
Display block toolbar separator	JHA / Layout / Display Block Toolbar Separator
Content toolbar separator	JHA / Layout / Content Toolbar Separator
Text in function toolbar	Add text and apply the “JHA / Text / Function Toolbar” character style.
Text in display block toolbar or content toolbar	Add text and apply the “JHA / Text / Regular” character style.

The floating toolbar is visible, so there is a design component for it.

All items within toolbars should be vertically centered and separated by 6 pixels of space. It can be very helpful to turn on horizontal stacking for the group containing the toolbar elements.

You can use the toolbar separator design component to visually group related sets of toolbar elements if needed.

If you need to display text in a toolbar, see the appropriate entries in the table above.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Tue Nov 26 2024

Toolbar

Overview

Development

Web component development

Component reference

rui-toolbar

rui-floating-toolbar

rui-toolbar-separator

Implementation

Function Toolbar

Floating Toolbar

Display Block Toolbar

Group Box Toolbar

Tab Toolbar

Displaying Text in a Toolbar

Angular wrapper development

Wrapper reference

jha-function-toolbar

jha-function-toolbar-right

jha-floating-toolbar

jha-display-block-toolbar

jha-display-block-toolbar-right

jha-group-box-toolbar

jha-tab-toolbar

jha-toolbar-separator

Implementation

Function Toolbar

Floating Toolbar

Display Block Toolbar

Group Box Toolbar

Tab Toolbar

Displaying Text in a Toolbar

Component playground

Design

Figma design

Adobe XD design