Global Header

A top header combining the product name, main views, and shared actions.

<sy-global-header>Installation guide Basic usage

Live preview

Interact with the component to see results here.

Product name

SearchHelpNotificationsSticky top

View code

HTML

<sy-global-header
  title="Syidax"
  information
  notification
></sy-global-header>

Usage guide

Collect the app's brand, navigation, and shared actions. Keep individual page titles in the body.

Brand: Put the logo in the logo slot.
Navigation: Place tabs in the tabs slot. To connect tab content, build the structure inside sy-tab-group.
Shared actions: Place account, settings, and similar actions in the actions slot.

Examples

Product name and shared actions

Click Help or Notifications to emit an action event.

View code

HTML

<sy-global-header
  title="Syidax"
  information
  notification
></sy-global-header>

Search input

Connect search-change events to the app's search.

View code

HTML

<sy-global-header title="Syidax" search></sy-global-header>

Brand and user actions

Place content such as real buttons in the logo and actions slots.

View code

HTML

<sy-global-header title="Syidax"><strong slot="logo"
    style="font-size:20px">S</strong>
  <sy-button slot="actions" size="small">My account</sy-button>
</sy-global-header>

Connect tabs and content

Switching tabs shows content with the matching tabkey and name. Tabs that do not fit move into the overflow menu.

View code

HTML

<sy-tab-group active="0" style="width:100%;height:260px">
  <sy-global-header title="Syidax">
    <div slot="tabs">
      <sy-tab tabkey="tab-0">Overview</sy-tab>
      <sy-tab tabkey="tab-1">Activity</sy-tab>
      <sy-tab tabkey="tab-2">Settings</sy-tab>
    </div>
  </sy-global-header>
  <sy-tab-content name="tab-0">
    <p style="margin:20px 0">View project status at a glance.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-1">
    <p style="margin:20px 0">Review recent changes and team activity.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-2">
    <p style="margin:20px 0">Manage the project's basic settings.</p>
  </sy-tab-content>
</sy-tab-group>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-global-header
  title="Syidax"
  information
  notification
></sy-global-header>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["changed", "actionClick", "selected"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Recalculate tab overflow

After changing the app layout, call updateOverflowTabs() to recalculate tab overflow for the current width.

View code

HTML

<sy-global-header
  title="Syidax"
  information
  notification
  id="supplement-1"
></sy-global-header>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Recalculate overflow</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {});
  const actionTarget0 = document.querySelector("#supplement-1");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.updateOverflowTabs();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Feature examples

Choose a feature from 10 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

API reference

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

`<sy-global-header>`

Properties

Type	Default	Description
`string`	`''`	Product name shown in the header. The HTML attribute is title.
`boolean`	`false`	Stick to the top of the nearest scroll container.
`boolean`	`false`	Show the search input.
`boolean`	`false`	Show the help action button.
`boolean`	`false`	Show the notification action button.

Events

Event	Detail	Description
	`CustomEvent<unknown>`	Emitted when the value or selection state changes.
	`CustomEvent<unknown>`	Read the result from the event's detail.
	`CustomEvent<unknown>`	Emitted when the user selects an item.

Methods

Method	Returns	Description
	`Promise<void>`	Recalculate the tabs shown in the overflow menu for the current width.

Slots

Slot	Description
	Content displayed in the logo area.
	Content displayed in the tabs area.
	Content displayed in the actions area.

Global Header

Usage guide

Examples

Product name and shared actions

Search input

Brand and user actions

Connect tabs and content

Events and payloads

Recalculate tab overflow

Feature examples

Usage examples · Overview

Property · App Title

Property · Information

Property · Notification

Property · Search

Property · Sticky

Methods · Update Overflow Tabs

Events · Action Click

Events · Changed

Events · Selected

API reference

`<sy-global-header>`

Properties

Events

Methods

Slots