Name: HTML Native Popover - No JavaScript
Rating: 4.5 (5332 reviews)
Author: heem

HTML Native Popover - No JavaScript

Ibraheem - Aug 22 -

Hello there everyone. I am a Frontend Developer with most of the experience in React. Recently, I have been trying to use plain HTML/CSS and least amount of JavaScript as possible, to make things simple and fast for the browsers.

I came across HTML's Native Popover which allowed me to make a hamburger menu with 0 JavaScript. It also has built-in accessibility support which is great.

Here's a piece of code for my hamburger menu using Popover

    <button
        id="hamburger-button" aria-controls="mobile-menu" aria-expanded="false" aria-haspopup="true"
        aria-label="Open blog navigation" popovertarget="mobile-menu"
    >
        <Icon
            id="hamburger-icon" name="mdi:hamburger-menu" title="Hamburger Menu Icon" width={70} height={70}
        />
    </button>
    <nav popover id="mobile-menu" aria-label="Main blog navigation">
        <button popovertarget="mobile-menu" aria-controls="mobile-menu" aria-label="Close blog navigation">
            <Icon
                id="close-icon" name="mdi:close" title="Close Icon" width={70} height={70}
            />
        </button>
        <SiteNavLinks />
    </nav>```