Skip to main content
Oat UI includes several web components for interactive functionality. These components use native HTML with progressive enhancement and work without JavaScript in degraded mode.

​
Available Components

Oat UI provides the following built-in web components:

​
<ot-tabs>

Accessible tab interface with automatic keyboard navigation and ARIA state management.

Tabs Documentation

View complete usage guide, examples, and API reference
Features:
  • Arrow key navigation (Left/Right)
  • Automatic ARIA attributes
  • Custom events (ot-tab-change)
  • Programmatic tab switching via activeIndex property
<ot-tabs>
  <div role="tablist">
    <button role="tab">Tab 1</button>
    <button role="tab">Tab 2</button>
  </div>
  <div role="tabpanel">Content 1</div>
  <div role="tabpanel">Content 2</div>
</ot-tabs>

​
<ot-dropdown>

Popover-based dropdown menus with smart positioning and keyboard navigation.

Dropdown Documentation

View complete usage guide, examples, and API reference
Features:
  • Auto-positioning (adjusts to viewport)
  • Arrow key navigation
  • Escape to close
  • Click-outside detection
<ot-dropdown>
  <button popovertarget="menu-id">Options</button>
  <menu popover id="menu-id">
    <button role="menuitem">Item 1</button>
    <button role="menuitem">Item 2</button>
  </menu>
</ot-dropdown>

​
Tooltip Enhancement

Automatic conversion of title attributes to styled tooltips with progressive enhancement.

Tooltip Documentation

View complete usage guide and examples
Features:
  • Progressive enhancement (native title works without JS)
  • Automatic aria-label generation
  • MutationObserver for dynamic content
  • 700ms delay before showing
<button title="Save your changes">Save</button>
<!-- Automatically enhanced to use styled tooltip -->

​
Sidebar Toggle

Click handler for responsive sidebar layouts with mobile slide-out behavior.

Sidebar Documentation

View complete layout guide and examples
Features:
  • Responsive behavior (desktop vs mobile)
  • Click-outside to dismiss on mobile
  • Attribute-based API (data-sidebar-toggle, data-sidebar-layout)
<div data-sidebar-layout>
  <aside data-sidebar>Sidebar content</aside>
  <main>
    <button data-sidebar-toggle>Toggle Menu</button>
  </main>
</div>

​
Progressive Enhancement

All Oat UI components are designed with progressive enhancement:
Components work without JavaScript in degraded mode
Native HTML semantics ensure accessibility
JavaScript enhances the experience with keyboard navigation and ARIA

​
Browser Support

Oat UI web components work in all modern browsers that support:
  • Custom Elements (Web Components)
  • ES6 classes and private fields
  • Popover API (for dropdowns and menus)
Oat includes a polyfill for Safari’s commandfor attribute used in dialog controls.