App Bar

App bars are headers used to display branding, navigation, and actions at the top of an application.

Overview

The app bar serves as a user’s primary navigation hub, containing everything needed to navigate within the current application, access other applications, and customize their experience. It provides persistent access to essential functionality including application identity, search capabilities, notifications, help resources, and user account management across all application contexts.

The app bar maintains consistent placement and functionality across different screen sizes and device types, ensuring users always have access to core navigation and utility functions regardless of their current location within the application.

Usage

forge-app-bar lays out branding and top-level actions through its logo, title, start, center, and end slots, plus elevation, theme, and themeMode. Reserve the start slot for navigation (typically a menu button that opens a drawer), the center slot for app-wide search, and the end slot for a small set of purpose-built buttons: help, notifications, an app launcher, and the user’s profile.

Rules

Maintain consistent app bar presence across all application screens.

Keep the menu button visible at every screen size for apps with a dismissible navigation drawer.

Reserve center-slot search for apps that are primarily search-driven; place search near the component it searches otherwise.

Order end-slot actions consistently: help, notifications, app launcher, then profile.

Don't

Don't crowd the end slot with more actions than help, notifications, an app launcher, and profile.

Don't duplicate primary navigation in both the app bar and a drawer — pick one place for it.

Don't use app bar search for a filter that's local to a single component on the page.

Don’t place links in the app bar — use appropriate navigation patterns instead.

Don’t place item-specific actions in the app bar — keep them contextual to affected content.

Don't put page-specific actions like Save, Edit, Delete, or Submit in the app bar — they go in the page's body header toolbar.

Structure

Place a logo in the logo slot and a title in the title slot (or set titleText directly), navigation in start, search in center, and action buttons in end.

An app bar composed from every slot at once: menu button, logo, search, and end actions.

<forge-app-bar title-text="Tyler Forge™" theme-mode="scoped" elevation="raised">
  <forge-app-bar-menu-button slot="start">
  </forge-app-bar-menu-button>
  <forge-icon slot="logo" name="forge_logo">
  </forge-icon>
  <forge-app-bar-search slot="center">
    <input type="text" placeholder="Search">
  </forge-app-bar-search>
  <forge-app-bar-help-button slot="end">
  </forge-app-bar-help-button>
  <forge-app-bar-notification-button slot="end">
  </forge-app-bar-notification-button>
  <forge-user-profile slot="end" button-label="Open profile menu" theme-toggle full-name="First Last" email="first.last@tylertech.com">
    <forge-profile-link slot="link">
      <forge-icon slot="icon" name="settings">
      </forge-icon>
      <a href="#">
        Settings
      </a>
    </forge-profile-link>
    <forge-profile-link slot="link">
      <forge-icon slot="icon" name="account_circle">
      </forge-icon>
      <a href="#">
        Profile
      </a>
    </forge-profile-link>
    <span slot="sign-out-button-text">
      Sign Out
    </span>
  </forge-user-profile>
</forge-app-bar>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconAccountCircle, tylIconForgeLogo, tylIconHelp, tylIconMenu, tylIconNotifications, tylIconSettings } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconAccountCircle, tylIconForgeLogo, tylIconHelp, tylIconMenu, tylIconNotifications, tylIconSettings]);
</script>

Theme

Set theme to tint the app bar, and themeMode to inherit (the default, applying that theme globally to the app bar and its children) or scoped (limiting it to just the app bar itself).

A themed app bar, scoped so the theme doesn't leak to the rest of the page.

<forge-app-bar theme-mode="scoped" title-text="Tyler Forge" elevation="raised" theme="white">
  <forge-icon slot="logo" name="forge_logo">
  </forge-icon>
</forge-app-bar>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconForgeLogo } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconForgeLogo]);
</script>

Theming pitfalls

With the default themeMode="inherit", global theme tokens cascade to every child element — including popovers and dialogs opened from the app bar, which can end up styled with the wrong colors. Switch to themeMode="scoped" to stop that cascade.

Scoping the theme comes with a tradeoff: elements placed directly in the app bar no longer inherit its colors automatically either. Set theme="app-bar" to opt a child back in — but it’s only supported on forge-button, forge-icon-button, and forge-tab-bar. The app bar’s own preset buttons (menu, help, notification) and forge-user-profile already set this for you.

For any other element, reference the app bar’s scoped tokens directly — --forge-app-bar-theme-foreground and --forge-app-bar-theme-background-muted:

forge-app-bar forge-avatar {
  --forge-avatar-background: var(--forge-app-bar-theme-foreground);
  --forge-avatar-color: var(--forge-theme-text-high);
}

forge-app-bar-menu-button is a preset icon button — defaulting to a hamburger icon — for opening navigation from the start slot.

A menu button in the start slot, ready to open a drawer.

<forge-app-bar title-text="Menu Button" elevation="raised">
  <forge-app-bar-menu-button slot="start">
  </forge-app-bar-menu-button>
</forge-app-bar>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconMenu } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconMenu]);
</script>

Search

forge-app-bar-search wraps a slotted <input> with search styling and an icon, through value, placeholder, and disabled, and fires forge-app-bar-search-input on Enter.

Search in the center slot, styled for the app bar.

<forge-app-bar title-text="Search" elevation="raised">
  <forge-app-bar-search slot="center">
    <input type="text" aria-label="Search for a record" placeholder="Search">
  </forge-app-bar-search>
</forge-app-bar>

Help button

forge-app-bar-help-button is a preset icon button that opens a dropdown menu of options — help links, docs, support contacts.

A help button opening a menu of options.

<forge-app-bar title-text="Help Icon" elevation="raised">
  <forge-app-bar-help-button slot="end">
  </forge-app-bar-help-button>
</forge-app-bar>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconHelp } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconHelp]);
const options = [{ label: "Help", value: "help" }];
const helpButton = document.querySelector("forge-app-bar-help-button");
if (helpButton) {
  helpButton.options = options;
}
</script>

Notification button

forge-app-bar-notification-button pairs a preset bell icon with a badge, controlled through showBadge, count, dot, and theme.

A notification button showing an unread dot.

<forge-app-bar title-text="Notifications" elevation="raised">
  <forge-app-bar-notification-button slot="end" show-badge dot>
  </forge-app-bar-notification-button>
</forge-app-bar>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconNotifications } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconNotifications]);
</script>

User profile

Use forge-user-profile in the end slot to show the signed-in user. It renders an avatar button that opens a popover with their fullName and email, any link-slotted profile links, an optional themeToggle, and a sign-out action, firing forge-user-profile-sign-out when it’s clicked.

Deprecated

forge-app-bar-profile-button is deprecated in favor of forge-user-profile. It remains available but is frozen — no new features, and possible removal in a future release.

A user profile in the end slot, opening a popover with profile links, a theme toggle, and sign out.

<forge-app-bar title-text="Profile" theme-mode="scoped" elevation="raised">
  <forge-user-profile slot="end" button-label="Open profile menu" theme-toggle full-name="First Last" email="first.last@tylertech.com">
    <forge-profile-link slot="link">
      <forge-icon slot="icon" name="settings">
      </forge-icon>
      <a href="#">
        Settings
      </a>
    </forge-profile-link>
    <forge-profile-link slot="link">
      <forge-icon slot="icon" name="account_circle">
      </forge-icon>
      <a href="#">
        Profile
      </a>
    </forge-profile-link>
    <span slot="sign-out-button-text">
      Sign Out
    </span>
  </forge-user-profile>
</forge-app-bar>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconAccountCircle, tylIconSettings } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconSettings, tylIconAccountCircle]);
</script>

App bars are headers used to display branding, navigation, and actions at the top of an application. They typically contain a logo, title, and various action items.

import "@tylertech/forge/app-bar";

Properties

Property	Attribute	Type	Default	Description
`titleText`	`title-text`	`string`	`''`	The text to display in the title.
`elevation`	`elevation`	`AppBarElevation`	`'raised'`	The elevation of the app bar.
`theme`	`theme`	`AppBarTheme`	`''`	The theme of the app bar.
`href`	`href`	`string`	`''`	The href that will be used to make the logo and title area a clickable link.
`target`	`target`	`string`	`''`	The `<a>` target of the logo + title area link when `href` is set.
`themeMode`	`theme-mode`	`AppBarThemeMode`	`'inherit'`	Controls how the theme is applied. `inherit` will apply the global theme to the app bar and all child components. `scoped` will only apply the theme to the app bar and not set any global tokens.

Events

Name	Type	Description
`forge-app-bar-navigate`	`CustomEvent<void>`	Fires when the app bar is clicked.

Slots

Name	Description
`logo`	Reserved for the brand logo.
`title`	Reserved for the application title. This will overwrite the `titleText` property/attribute.
`start`	Places content at the beginning of the app bar.
`center`	Places content in the center of the app bar.
`end`	Places content at the end of the app bar.

CSS Parts

Name	Description
`::part(root)`	The root container element.
`::part(title)`	The title element.

CSS Custom Properties

Name	Description
`--forge-app-bar-background`	The background color of the app bar.
`--forge-app-bar-foreground`	The text color of the app bar.
`--forge-app-bar-theme-foreground`	The text color of the app bar when using the scoped theme mode.
`--forge-app-bar-theme-foreground-muted`	The muted text color of the app bar when using the scoped theme mode.
`--forge-app-bar-z-index`	The `z-index` of the app bar.
`--forge-app-bar-elevation`	The elevation of the app bar.
`--forge-app-bar-height`	The height of the app bar.
`--forge-app-bar-row-padding`	The inline padding of the app bar.
`--forge-app-bar-logo-gap`	The space between the logo and title.
`--forge-app-bar-title-padding`	The padding around the title element.
`--forge-app-bar-columns`	The grid column track sizes.
`--forge-app-bar-transition-duration`	The transition duration for animations.
`--forge-app-bar-transition-timing`	The transition timing function for animations.

Keyboard interaction

Every sub-component slotted into the app bar — menu button, search, help, notifications, profile — needs to be reachable and operable using only the keyboard.

Heading hierarchy

The title slot renders as an <h1> by default. If you override it with your own content, use a real heading element, and keep only one <h1> per page — a new heading hierarchy started deliberately (inside a dialog, for example) is the one exception. The app bar itself renders as a <header> landmark.