SelectaDNA Navigation Redesign
This standalone page demonstrates the improved navigation. Resize the window or open on mobile to see the responsive drawer in action. Fully keyboard-navigable and screen-reader accessible.
Mobile Drawer
Slides in from the right on iOS/Android. Smooth CSS transitions, no layout jank, swipe-close via overlay tap.
WCAG 2.1 AA
Full ARIA roles, focus trapping in the drawer, skip-nav link, keyboard-navigable with Escape to close.
Proper Touch Targets
All tappable elements meet the 44×44px minimum. No accidental taps on adjacent items.
Keyboard Navigation
Tab through all items, Enter/Space to open accordions, Escape to close the drawer from anywhere inside it.
Zero Dependencies
Pure HTML, CSS & vanilla JS. No jQuery, no Bootstrap, no frameworks. Instant load on Cloudflare Pages.
Sticky & Solid
Stays pinned at the top on scroll. Designed to integrate cleanly into your existing Laravel/Blade layout.