StickyTray
StickyTray
Authored viewport-persistent content tray with independent visibility, placement, and occupied-edge geometry.
Root
qp-sticky-tray
Viewport-persistent collapsible content tray on the shared persistent layer.
Children
qp-sticky-tray__bar
Persistent handle and independent disclosure control.
qp-sticky-tray__chevron
Tray expand/collapse indicator.
qp-sticky-tray__handle
Ordinary Element content within the persistent handle.
qp-sticky-tray__panel
Collapsible tray content panel.
qp-sticky-tray__toggle
Panel disclosure button, covering the full handle or presented as a separate chevron; never nests authored controls.
qp-sticky-tray__trigger
Authored-location anchor marker used by optional visibility triggers.
Modifiers
Disclosure
Panel interaction independent from tray visibility conditions.
- none — qp-sticky-tray--disclosure-none
- handle — qp-sticky-tray--disclosure-handle
- chevron — qp-sticky-tray--disclosure-chevron
Position Mode
Whether the tray overlays or reserves the document viewport edge.
- overlay — qp-sticky-tray--overlay
- inset — qp-sticky-tray--inset
Vertical
Authored StickyTray vertical placement mapping.
- top — qp-sticky-tray--vertical-top
- middle — qp-sticky-tray--vertical-middle
- bottom — qp-sticky-tray--vertical-bottom
Horizontal
Authored StickyTray horizontal placement mapping.
- left — qp-sticky-tray--horizontal-left
- center — qp-sticky-tray--horizontal-center
- right — qp-sticky-tray--horizontal-right
Example
Rendered HTML
<span class="qp-sticky-tray__trigger" data-qp-sticky-tray-trigger="quick-links" aria-hidden="true"></span>
<section class="qp-sticky-tray qp-sticky-tray--vertical-top qp-sticky-tray--horizontal-center qp-sticky-tray--overlay qp-sticky-tray--disclosure-handle" id="quick-links" aria-label="Quick links" data-qp-sticky-tray data-qp-sticky-tray-mode="overlay" data-qp-sticky-tray-disclosure="handle" data-qp-sticky-tray-edge="top">
<div class="qp-sticky-tray__bar" data-qp-sticky-tray-bar>
<div class="qp-sticky-tray__handle"><p class="qp-paragraph qp-paragraph--left"><span class="qp-icon qp-inline-icon" aria-hidden="true">☰</span> Quick links</p>
</div>
<button class="qp-sticky-tray__toggle" type="button" aria-label="Quick links" aria-expanded="false" aria-controls="quick-links-body" data-qp-sticky-tray-toggle><span class="qp-sticky-tray__chevron" aria-hidden="true">▾</span></button>
</div>
<div class="qp-sticky-tray__panel" id="quick-links-body" hidden data-qp-sticky-tray-panel>
<section id="quick-links-content" class="qp-section qp-section--width-default qp-section--appearance-transparent">
<div class="qp-section__header">
<h2 class="qp-section__title qp-sr-only">Quick links</h2>
</div>
<div class="qp-section__body">
<nav class="qp-menu" aria-label="Quick links" data-qp-menu>
<ul class="qp-menu__list">
<li class="qp-menu__item" data-qp-menu-item>
<a class="qp-menu__link" href="#example">Example</a>
</li>
</ul>
</nav> </div>
</section>
</div>
</section>