syidaxdesign system
Home Pricing Settings
ComponentsNavigation

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.
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>

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>

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

Attribute / PropertyTypeDefaultDescription
string''Product name shown in the header. The HTML attribute is title.
booleanfalseStick to the top of the nearest scroll container.
booleanfalseShow the search input.
booleanfalseShow the help action button.
booleanfalseShow the notification action button.

Events

EventDetailDescription
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

MethodReturnsDescription
Promise<void>Recalculate the tabs shown in the overflow menu for the current width.

Slots

SlotDescription
Content displayed in the logo area.
Content displayed in the tabs area.
Content displayed in the actions area.
Design SystemTab Navigate Enter Open