Filament•6mo ago

How to use Esc key to close the navigation menu on smaller browsere window size?

It seems that Esc is not working for the sliding out nav menu. How to make it work? If you snap to one half of a screen size on a 1920 px screen it shows the hamburger menu which is ok. But if you click on the hamburger menu and it slides out. the Esc key is not working to dismiss it. You have to click somewhere on the screen. How to make the Esc key work for navigation menu? I have checked the slide out for resources and there the Esc keys works ok.

3 Replies

Wirkhof•6mo ago

Is this possible in the current version of Filament? It's funny that the Esc key works with other slideovers. Any idea why it's not working with the hamburger navigation if it's using the same slideover? I am reopening this question because I still haven't found a solution. Any idea how to make the Esc key work? In which part of the code should this be solved?

Shaung Bhone•6mo ago

You can override the filament navigation component and add livewire event.

Wirkhof•6mo ago

So, it's a custom thing I have to do and Filament can't do this to the nav menu out of the box with something like ->navigationKeyEsc(true) ? For example:

return $panel
    ->default()
    ->id('admin')
    ->navigationKeyEsc(true)
...

return $panel
    ->default()
    ->id('admin')
    ->navigationKeyEsc(true)
...

Gaming

Programming

How to use Esc key to close the navigation menu on smaller browsere window size?