← Back to Components

main-toolbar Component Documentation

A responsive main toolbar component that organizes navigation and user controls in a consistent header format using slots for flexible content arrangement.

Features

Flexible layout with three content sections: left, center, and right
Slot-based design for maximum flexibility and customization
Customizable through CSS variables
Responsive design that adapts to different screen sizes
Mobile-friendly dropdown menu with hamburger icon for small screens
Lightweight with minimal built-in elements
Direct access to inner components through getter methods

Installation

Include the component in your project:

<script src="https://cdn.q360.ai/assets/components/main-toolbar/qds-main-toolbar.js" type="module"></script>

Or import it in your JavaScript:

import "https://cdn.q360.ai/assets/components/main-toolbar/qds-main-toolbar.js";

You can also load all components at once:

<script src="https://cdn.q360.ai/assets/components/index.js" type="module"></script>

Usage

<qds-main-toolbar>
  <div slot="left">
    <hierarchical-menu></hierarchical-menu>
    <qds-company-logo src="https://cdn.q360.ai/qed-design/QuantumLogos/QCG/qcg-logo.svg"></qds-company-logo>
    <qds-menu-spacer height="20"></qds-menu-spacer>
    <span style="font-size: 18px; font-weight: 500; margin-left: 4px;">QUILT</span>
  </div>
</qds-main-toolbar>

Mobile-Friendly Buttons

For optimal mobile experience, add descriptive labels to your right-section buttons:

<button class="toolbar-button">
  <svg viewBox="0 0 24 24"><!-- icon path --></svg>
  <span class="menu-label">Settings</span>
</button>

The menu-label is hidden on desktop but appears in the mobile dropdown menu.

Basic Structure with Slots

The toolbar provides three slots for content:

<qds-main-toolbar>
  <!-- Left section: typically menu and logo -->
  <div slot="left">
    <!-- Your left section content here -->
  </div>
  
  <!-- Center section: typically app name or main content -->
  <div slot="center">
    <!-- Your center section content here -->
  </div>
  
  <!-- Right section: typically user controls -->
  <div slot="right">
    <!-- Your right section content here -->
  </div>
</qds-main-toolbar>

Complete Example

<qds-main-toolbar site-name="QUILT" app-version="2.1.0">
  <!-- Left slot with menu, logo, and app name -->
  <div slot="left">
    <hierarchical-menu id="menu"></hierarchical-menu>
    <qds-company-logo 
      src="https://cdn.q360.ai/qed-design/QuantumLogos/QCG/qcg-logo.svg" 
      alt="QCG Logo">
    </qds-company-logo>
    <qds-menu-spacer height="20"></qds-menu-spacer>
  </div>
  
  <!-- Right slot with components -->
  <div slot="right">
    <qds-notification-tray count="3"></qds-notification-tray>
    <qds-theme-switch></qds-theme-switch>
    <qds-menu-spacer></qds-menu-spacer>
    <qds-settings-button></qds-settings-button>
    <button class="toolbar-button">
      <i class="pi pi-question-circle"></i>
      <span class="menu-label">Help</span>
    </button>
    <button class="toolbar-button">
      <i class="pi pi-comments"></i>
      <span class="menu-label">Feedback</span>
    </button>
    <qds-menu-spacer></qds-menu-spacer>
    <qds-user-avatar name="John Doe" status="online"></qds-user-avatar>
  </div>
</qds-main-toolbar>

<script>
  // Configure the hierarchical menu
  const menu = document.getElementById('menu');
  menu.setAttribute('data', JSON.stringify(menuItems));
  menu.setAttribute('hierarchy', JSON.stringify(hierarchy));
</script>

Attributes

Attribute	Type	Description	Default
`logo-url`	String	URL to the company logo displayed in the left (if no left slot content is provided)	“”
`compact`	Boolean	When true, displays a compact toolbar (52px height)	false
`dark`	Boolean	When true, displays the dark theme version of the toolbar	false
`site-name`	String	The name of the site to display next to the logo	“”
`app-version`	String	The version of the application to display as a subscript next to the site name	“”
`auth-config`	String	JSON string containing auth configuration (clientId, authority, scopes)	null
`main-menu-data`	String	JSON string containing menu items for the horizontal menu in the center slot	null

Slots

Slot Name	Description
`left`	Content for the left side of the toolbar (typically menu and logo)
`center`	Content for the center of the toolbar (typically app name)
`right`	Content for the right side of the toolbar (typically user controls)

Responsive Behavior

The component automatically adapts to different screen sizes:

Desktop/Tablet view: Shows the full toolbar with all sections visible
Mobile view (≤ 480px):
- Hides logo images in the left section
- Moves all right section content to a dropdown menu
- Shows a hamburger icon to toggle the dropdown menu
- Displays labels next to icons in the dropdown menu for better readability

This responsive behavior ensures that the toolbar remains usable on small screens while keeping all functionality accessible.

Styling

The component can be styled through CSS variables:

qds-main-toolbar {
  --toolbar-bg-color: #1a73e8;
  --toolbar-text-color: white;
}

CSS Variables

Variable	Description	Default
`--toolbar-bg-color`	Background color of the toolbar	#ffffff
`--toolbar-text-color`	Text color in the toolbar	#333333

The mobile menu sections also expose CSS parts that can be styled:

/* Style the hamburger button */
qds-main-toolbar::part(hamburger-button) {
  /* custom styles */
}

/* Style the mobile dropdown menu */
qds-main-toolbar::part(mobile-menu) {
  background-color: #f0f0f0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Style the app version */
qds-main-toolbar::part(app-version) {
  color: #0078d4;
  font-style: italic;
}

Styling Slotted Content

You can style the content placed in slots using regular CSS:

/* Style the logo in the toolbar */
.logo {
  height: 32px;
  margin: 0 12px;
}

/* Style buttons in the right section */
.notifications, .theme-toggle, .settings {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

Component Access Methods

The toolbar provides methods to access the built-in right section components:

Method	Returns	Description
`getHelpButton()`	HTMLElement or null	Gets the help button in the right slot
`getNotificationTray()`	HTMLElement or null	Gets the notification tray in the right slot
`getUserAvatar()`	HTMLElement or null	Gets the user avatar in the right slot
`getSettingsButton()`	HTMLElement or null	Gets the settings button in the right slot

Events

Event Name	Description	Event Detail
`versionClicked`	Fired when the app version is clicked	`{ version: string }` - The current app version

Example Usage

const toolbar = document.querySelector('qds-main-toolbar');

// Set the app version programmatically
toolbar.appVersion = '2.1.1';

// Access the notification tray to set a notification count
const notificationTray = toolbar.getNotificationTray();
if (notificationTray) {
  notificationTray.count = 5;
}

// Add a click handler to the help button
const helpButton = toolbar.getHelpButton();
if (helpButton) {
  helpButton.addEventListener('click', () => {
    console.log('Help button clicked');
  });
}

// Set user avatar properties
const userAvatar = toolbar.getUserAvatar();
if (userAvatar) {
  userAvatar.name = 'Jane Doe';
  userAvatar.status = 'online';
}

// Set menu data for the horizontal menu in the center slot
const menuItems = [
  { name: "Home", linkUrl: "/home", description: "Home page" },
  { name: "Products", linkUrl: "/products", description: "Products" },
  { name: "Services", linkUrl: "/services", description: "Services",
    items: [
      { name: "Consulting", linkUrl: "/services/consulting" },
      { name: "Training", linkUrl: "/services/training" }
    ]
  },
  { name: "About", linkUrl: "/about", description: "About us" }
];
toolbar.mainMenuData = JSON.stringify(menuItems);

// You can also set it directly using the attribute
toolbar.setAttribute('main-menu-data', JSON.stringify(menuItems));

// Listen for version click events
toolbar.addEventListener('versionClicked', (event) => {
  const versionInfo = event.detail.version;
  console.log(`Version ${versionInfo} was clicked`);
  
  // Show version details in a dialog
  showVersionDetails(versionInfo);
});

Browser Support

This component uses standard Web Component APIs and works in all modern browsers that support Custom Elements v1.