@fremtind/jkl-hamburger-react

Beskrivelse

Se portalen for bruk og prinsipper.

Kom i gang

Lær hvordan du kan ta i bruk Jøkul

Bruk av React-pakken

Installasjon

1. Installér pakken med yarn add @fremtind/jkl-hamburger-react eller npm i @fremtind/jkl-hamburger-react. Stil-pakken blir automatisk installert som en avhengighet.
2. Importér både React-pakken og stil-pakken i prosjektet ditt:

import { Hamburger } from "@fremtind/jkl-hamburger-react";
import "@fremtind/jkl-hamburger/hamburger.min.css";

Bruk

Sørg for at du får med deg riktige attributter for tilgjengelighet. Se i portalen om du er usikker.

const [menuIsOpen, setMenuIsOpen] = useState(false);
const toggleMenu = () => setMenuIsOpen((prevState) => !prevState);

<Hamburger id="min-hamburger" onClick={toggleMenu} isOpen={menuIsOpen} aria-controls="min-meny" />

<div id="min-meny" aria-labelledby="min-hamburger" role="group" hidden={!menuIsOpen}>
    <ul>
        // ...menyobjekter
    </ul>
</div>