Skip to content
Forge

Dropdown menu

A navigation bar with dropdown submenus that close with the Escape key, an outside click or when focus leaves the menu.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

Each submenu follows the disclosure pattern recommended for site navigation: a button with aria-expanded and a plain list of links, with no menu role to confuse screen readers. Escape returns focus to the button. On mobile, the panel spans the full width of the bar.

Code

Loading the code…

Archive contents

menu-deroulant-html-tailwind.zip3 files · 4 Ko

  • index.html10 Ko
  • README.md2 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 13, 2026.

In the same spirit

  • Page table of contents

    Free

    A table of contents that follows the reader through a long article and highlights the current section.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Pagination

    Free

    Complete pagination with the current page, ellipses and previous/next arrows that are properly disabled.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Breadcrumb

    Free

    An accessible breadcrumb that places the page within the site and tightens on mobile to fit on one line.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Video testimonial with transcript

    Free

    A CSS-drawn video poster with a play button, the testimonial's key quote, its author, and the timestamped transcript in a collapsible panel.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component