In the demos below, you'll be able to tell that a focus trap is active because it will turn [green]. You should also be able to tell because it will trap your focus!

When a trap is active, you can deactivate it by pushing its deactivate button or, if the demo allows, pressing the Escape key.

Before you try the demos, if you're using macOS, make sure you have enabled keyboard navigation in order to use the Tab key to move focus between all controls.

In Ventura (v13), you'll find this under System Settings > Keyboard. Prior to Ventura, it may have been under System Settings > General.

FireFox and Safari, for example, respect this setting and without it enabled, you won't get a good experience. Chrome appears to ignore it (at least in v109). While focus-trap will still trap all the right nodes, the browser/OS will not let you access all tabbable nodes on the page, nor in any traps you activate, while using the Tab key.

The above was taken from https://focus-trap.github.io/focus-trap/ as a starting reference for showcasing focus trapping behavior.

For API instructions and getting started, go the GitHub Repository for code examples.

Focus Trapping

focus-hunter traps support multiple levels of focus trapping. It does so by maintaining a Set on window.focusHunter.trapStack. Try having multiple trap stacks enabled at once.

Focus Trapping in a dialog

Click the button to toggle a dialog / modal which has a focus trap built-in.

Focus Trapping with regular light DOM

I'm a focus trap with Link without an href Link with an href There's some hidden buttons here!





Contenteditable div

Focus trapping with tabindexes

These will tab in reverse order because of their tabindex.


Focus Trapping with <iframe>, <video>, and <audio> elements

These will allow tabbing into the closed shadow dom of these elements with controls.




Focus Trapping with <iframe>, <video>, and <audio> elements

These will allow tabbing into the closed shadow dom of these elements with controls.




Handling overflow elements

Non-overflowing w/ overflow: auto;


Overflowing w/ overflow: auto;


overflow scroll


overflow scroll


overflow: hidden;