Admin Bar Component is a set of Web Components that can be added to any website—regardless of what frameworks or CMS powers it. While it can be used on any web page, it’s targeted as a toolbar that provides internal navigation for users logged into web applications.
It requires that you import its JavaScript and CSS files to get started, then HTML can be used to add items to the toolbar. Everything in Admin Bar Component is customizable and themable. By default an <admin-bar> component is a blank toolbar, until you add props and slot content:
Subcomponents
Any HTML element can be added to the Admin Bar Component toolbar, but a set of subcomponents make for consistency in their look and feel.
Link to shortcuts, trigger JavaScript methods, or display content in an HTML popover.
Show the status of user preferences or toggle attributes on the page to preview display modes.
Share stats, messages, and static information important to your users.
Classes on <admin-bar> elements, sticky and fixed, 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.
Who says toolbars have to be horizontal? Vertical mode turns Admin Bar Component into a single-column. An additional class can be used to fill the entire screen (great on mobile devices).
A prop can be used to automatically switch Admin Bar Component from horizontal to vertical at a specific breakpoint. Smaller screens are optimized for mobile while wider screens get the horizontal toolbar.
A toggle can be added to both horizontal and vertical toolbars—allowing you to collapse Admin Bar Component down to a single button.
A drag handle can also be added to the toggle button that allows you to use a mouse or finger to move it out of the way.
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.
Test out changes on the current page or change user preferences using checkboxes that look and feel like other Admin Bar components.
If you are using an icon set for consistency, the checkbox can be replaced using the checked-icon and unchecked-icon slots.
Show progress of API requests using an animated progress bar that changes color depending on if the request was successful or not.
An <admin-bar-text> element can show a line of text.
Badges can be added to <admin-bar-text> and <admin-bar-button> elements to show stats.
Badges can also be used without any other text content.
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.
A11y and I18n
Props are available to add descriptions and ARIA labels to elements nested inside Admin Bar Component’s elements.
All static text is set through props or slots so it can be changed from its en-US default.
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.
Declarative or Programmatic
Admin Bar Component can be rendered as HTML on the page, or for JavaScript-centric projects and SPAs you can use the AdminBarBuilder helper class to use data to render an Admin Bar Component.
import { AdminBarBuilder, defineAdminBarElements } from "admin-bar-component"
import "admin-bar-component/admin-bar.css"
defineAdminBarElements(['button', 'checkbox', 'text'])
/**
* Get data from API endpoint or from an object.
*/
const builderData = {
buttons: [
{
buttonAriaLabel: 'Links to dashboard page',
buttonHref: 'https://wbrowar.com/web-components/admin-bar-component',
labelText: 'Dashboard',
icon: iconSvgPencil,
type: 'button',
},
{
labelText: 'Popover Children',
badgeContent: '25',
// Icon will not render due to `<script>` tag
icon: '<svg><p>Hahaha</p><script>console.log("This should NOT fire!")<' + '/script></svg>',
popover: [
{
textContent: 'Popover content!',
type: 'text',
},
],
type: 'button',
},
{
labelText: 'Checkbox',
inputSwitch: true,
type: 'checkbox',
},
{
labelText: 'Will not render',
popover: [
{
textContent: 'Popover content!',
type: 'text',
},
{
// Invalid text element will not let the button render
type: 'text',
},
],
type: 'button',
},
{
badgeContent: '67',
badgePosition: 'before',
textContent: 'This is a message!',
type: 'text',
},
],
environment: {
badge: 'DEV',
description: 'This website is in Dev Mode.',
enable: true,
},
greeting: {
avatarAlt: 'randomly generated image',
avatarSrc: fpoImageSrc,
buttonAriaLabel: 'Popover Menu',
enable: true,
text: 'Hello, Author',
},
logout: {
enable: true,
href: '/logout',
label: 'Logout',
},
}
/**
* Generate `<admin-bar>` and add it to the page.
*/
const builderContainer = document.getElementById('admin-bar-target')
if (builderContainer) {
new AdminBarBuilder({
options: {
adminBarClass: 'sticky',
},
container: builderContainer,
data: builderData,
})
}The code above would instantly replace the children in #admin-bar-target with an <admin-bar> element, but you could instead choose to manually set the data, set the container, get a rendered <admin-bar> node, and then manually place it on the page. See examples in this CodePen.
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.