Admin Bar Component is a set of Web Components that can be added to any website—regardless of what frameworks or CMS powers it. It requires that you import its JavaScript and CSS files to get started, then HTML can be used to add items to the toolbar.
- The
<admin-bar>element is the wrapper that positions the toolbar on the page. <admin-bar-button>elements can add links, buttons withonclickevents, and popover menus.<admin-bar-text>elements can provide plain text, stats, lists, and tables to<admin-bar>or<admin-bar-button>popovers.
Classes on <admin-bar> elements, sticky and fixed, can be added to make it easy to position the toolbar on the page.
These classes can be combined with a bottom class that moves the toolbar to the bottom of the page.
CSS Custom Properties and Cascade Layers are used to give you flexibility to style Admin Bar Component to match your project’s color palette.
The styles above are set with these CSS overrides:
admin-bar {
--admin-bar-height: 60px;
--admin-bar-bg: rebeccapurple;
--admin-bar-color-highlight: rebeccapurple;
--admin-bar-environment-bg-color: mediumaquamarine;
--admin-bar-color-highlight-logout: mediumaquamarine;
}You can add a customized greeting to confirm the logged-in user and show their username and avatar (if they have one). A popover menu can be added under the greeting to point to more account-related pages.
You can also add a logout button and set the location where it links to. For systems where logout is done via JavaScript methods, there is an attribute you can add to any <admin-bar-button> element that styles it to look like a logout button.
When working across multiple development environments, you can use the environment ribbon to let users know when they are not on the Live/Production environment.
When working across multiple development and staging environments, the color of the ribbon can be set via CSS.
Admin Bar Component was built so you can provide quick ways to get to pages relevant to your users. For example, you can link to the edit page in the CMS for the page you are currently on.
You could add an onclick event to an <admin-bar-button> element to trigger a JavaScript callback.
For more in-depth projects, a popover menu can be used to provide links or information relevant to the current page.
An <admin-bar-text> element can show a line of text.
Labels can be added to <admin-bar-text> elements to show stats.
Labels can also be used without any other text content to provide a badge-style label.
When used in a popover, a multi-line attribute can be used to allow the text to flow to multiple rows (when a max-width is added to the popover content or the popover spans the full viewport size).
List of content can be shown in popovers by using a dl-content attribute on a <admin-bar-text> element.
Admin Bar Component uses CSS Grid and flexbox, which means it already supports the right-to-left reading direction, but if it needs to be manually set the rtl class will force the toolbar to switch to RTL.
Ready to Meet Your Users
Admin Bar Component is used across thousands of Craft CMS projects via the plugin, Admin Bar for Craft CMS. The Craft CMS plugin is used to simplify setup and add shortcuts to edit pages and common links based on the logged-in user’s permissions.
Admin Bar Component is free open source software (MIT License), so it can be used in SPAs, SaaS projects, and in other CMSs.