I’ve been trying to make an element “fullscreen whilst also showing the browser’s navigation UI”, but I cannot get the Web API requestFullscreen navigationUI option to work for me.

This is the code I’ve been using: https://codepen.io/adem-repo/pen/PobBWBb

HTML

<div class="wrapper">
    <div class="fullscreen-button">
        <div class="fullscreen-enter">enter fullscreen</div>
        <div class="fullscreen-exit">exit fullscreen</div>
    </div>
</div>

CSS

html, body {
    margin: 0;
    height: 100%;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.fullscreen-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 60px;
    border-radius: 24px;
    background-color: rgba(0, 0, 0, .5);
    cursor: pointer;
    color: #fff;
}

.fullscreen-button .fullscreen-exit {
    display: none;
}

.fullscreen-button.active .fullscreen-exit {
    display: block;
}

.fullscreen-button.active .fullscreen-enter {
    display: none;
}

JS

const fullscreenButton = document.querySelector('.fullscreen-button');


fullscreenButton.addEventListener('click', () => {
    if (document.fullscreenElement === null) {
        document.documentElement.requestFullscreen({ navigationUI: "show" })
        .catch(err => { console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`, err); });
    } else {
        document.exitFullscreen();
    }
})

document.addEventListener('fullscreenchange', () => {
    console.log('document fullscreen change event')
    document.fullscreenElement !== null ? fullscreenButton.classList.add('active') : fullscreenButton.classList.remove('active');
})

I expected to see the browser navigation UI above the element after I click the enter fullscreen button. Instead, I only see the element.

I’m using Chrome 125 and FF 126