Navigation & Overlays

Tabs переключают близкие представления, dropdown подходит для коротких action-menu, tooltip дает компактную подсказку, popover раскрывает небольшой контекстный блок.

Tabs HTML

<div class="tabs" role="tablist" aria-label="View mode">
  <button class="tab tab-active" type="button" role="tab" aria-selected="true">Overview</button>
  <button class="tab" type="button" role="tab" aria-selected="false">Activity</button>
  <button class="tab" type="button" role="tab" aria-selected="false">Settings</button>
</div>

Dropdown HTML

<div class="dropdown">
  <button class="btn btn-secondary with-icon" type="button" data-dropdown-toggle aria-expanded="false">
    <i class="ph ph-dots-three-outline"></i>
    Actions
  </button>
  <div class="dropdown-menu" role="menu">
    <button class="dropdown-item" type="button" role="menuitem">Edit</button>
    <button class="dropdown-item" type="button" role="menuitem">Duplicate</button>
    <button class="dropdown-item dropdown-item-danger" type="button" role="menuitem">Delete</button>
  </div>
</div>

Tooltip HTML

<span class="tooltip">
  <button class="btn btn-primary with-icon" type="button" data-tooltip-toggle>
    <i class="ph ph-question"></i>
    Help
  </button>
  <span class="tooltip-panel" role="tooltip">
    Short contextual hint for compact controls.
  </span>
</span>

Popover HTML

<div class="popover">
  <button class="btn btn-accent with-icon" type="button" data-popover-toggle aria-expanded="false">
    <i class="ph ph-info"></i>
    Details
  </button>
  <div class="popover-panel">
    <h3 class="popover-title">Context</h3>
    <p class="popover-text">Use popover for short forms, metadata, previews, and low-risk contextual actions.</p>
  </div>
</div>

Overlays JS

Overlays.init();

// Available on the global namespace too:
GNexusUIKit.Overlays.closeAll();