Short Answer
The principles for displaying hidden content that you describe work for both a dropdown and for a menu.
If you implement all of the same accessibility features for the toggle part (not the content of the 'dropdown' / 'menu' content) then you should have a pretty good accessible menu.
Long Answer / Things to consider
Without seeing the code side by side I am making general assumptions.
I am also covering a lot of points about the content of a bootstrap dropdown vs a menu as you didn't make it clear which parts you were thinking of copying.
A few things I would consider / to be aware of
(1) - Your menu should use the <nav>
element to be semantically correct. At this point you can hopefully see that the structure of a bootstrap dropdown won't work as it is designed to work with just links, not contained within a list.
(2) - One thing you didn't mention (but I assume you have done) is naming the button to open the menu with either aria-labelledby
, aria-label
or with some visually hidden text.
(3) - I noticed you can tab out of the menu when it is open, yet again can't see your code but I would normally say trap focus within the menu (rather than closing it as you would a dropdown) and either have a 'close' button or allow navigation back to the menu toggle to close the menu again (and change the label / use visually hidden text to indicate menu close when it opens - e.g. change 'open menu' to 'close menu' in your label / visually hidden text).
Either that or make sure that if you allow users to move focus outside of the menu it closes automatically (I prefer the first option as screen reader users may navigate by links in your menu so you can't rely on capturing just the tab key and then you are trying to check where the focus is).
If you decide to trap focus for screen reader users you need to add aria-hidden="true"
to everything outside of the menu as well as managing the tab key.
I normally position the menu <nav>
outside of the <header>
if I am creating a flyout menu so that I can just apply the tabindex
and aria-hidden
to the <header>
, <main>
and <footer>
and toggle those values on the <nav>
. (reverse them for when the menu is closed / on page load). This is another important distinction as the parent container for the flyout menu must be the <nav>
element to be HTML5 valid.
(4) - Make sure you can close the menu with the Escape key as that is expected (you mentioned that, just reinforcing it).
(5) - You also need to consider indicating the current page in navigation vs a dropdown where it contains just actions.
The most widely accessible version of 'current page' I know of looks like the following:-
<nav>
<ul>
<li><a href="#" aria-describedby="pageCurrent">home</a></li>
<li><a href="about">about</a></li>
<li><a href="contact-us">contact us</a></li>
</ul>
<div id="pageCurrent">current page</div>
</nav>
Or just remove the link to the current page from the menu list entirely as it should be your H1 (some debate about which method is best, I think both are fine).
Once you consider all of the above factors (off the top of my head as I can't do a code comparison) you can see why you can't really use bootstraps dropdown for anything other than the toggle method, which you seem to have implemented all necessary accessibility features anyway.