<section class="section docs-section" id="navigation-overlays">
                  <h2 class="section-title">Navigation & Overlays</h2>
                  <p class="docs-section-description">Tabs переключают близкие представления, dropdown подходит для коротких action-menu, tooltip дает компактную подсказку, popover раскрывает небольшой контекстный блок.</p>
                  <div class="block">
                    <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>
                    <div class="demo-actions">
                      <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">
                            <i class="ph ph-pencil-simple"></i>
                            Edit
                          </button>
                          <button class="dropdown-item" type="button" role="menuitem">
                            <i class="ph ph-copy"></i>
                            Duplicate
                          </button>
                          <button class="dropdown-item dropdown-item-danger" type="button" role="menuitem">
                            <i class="ph ph-trash"></i>
                            Delete
                          </button>
                        </div>
                      </div>
                      <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>
                      <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>
                    </div>
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Tabs HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="tabs" role="tablist" aria-label="View mode"&gt;
  &lt;button class="tab tab-active" type="button" role="tab" aria-selected="true"&gt;Overview&lt;/button&gt;
  &lt;button class="tab" type="button" role="tab" aria-selected="false"&gt;Activity&lt;/button&gt;
  &lt;button class="tab" type="button" role="tab" aria-selected="false"&gt;Settings&lt;/button&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Dropdown HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="dropdown"&gt;
  &lt;button class="btn btn-secondary with-icon" type="button" data-dropdown-toggle aria-expanded="false"&gt;
    &lt;i class="ph ph-dots-three-outline"&gt;&lt;/i&gt;
    Actions
  &lt;/button&gt;
  &lt;div class="dropdown-menu" role="menu"&gt;
    &lt;button class="dropdown-item" type="button" role="menuitem"&gt;Edit&lt;/button&gt;
    &lt;button class="dropdown-item" type="button" role="menuitem"&gt;Duplicate&lt;/button&gt;
    &lt;button class="dropdown-item dropdown-item-danger" type="button" role="menuitem"&gt;Delete&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Tooltip HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;span class="tooltip"&gt;
  &lt;button class="btn btn-primary with-icon" type="button" data-tooltip-toggle&gt;
    &lt;i class="ph ph-question"&gt;&lt;/i&gt;
    Help
  &lt;/button&gt;
  &lt;span class="tooltip-panel" role="tooltip"&gt;
    Short contextual hint for compact controls.
  &lt;/span&gt;
&lt;/span&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Popover HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="popover"&gt;
  &lt;button class="btn btn-accent with-icon" type="button" data-popover-toggle aria-expanded="false"&gt;
    &lt;i class="ph ph-info"&gt;&lt;/i&gt;
    Details
  &lt;/button&gt;
  &lt;div class="popover-panel"&gt;
    &lt;h3 class="popover-title"&gt;Context&lt;/h3&gt;
    &lt;p class="popover-text"&gt;Use popover for short forms, metadata, previews, and low-risk contextual actions.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Overlays JS</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-js">Overlays.init();

// Available on the global namespace too:
GNexusUIKit.Overlays.closeAll();</code></pre>
	</div>
</section>