Svelte-Sidebar-Menu
Installation
npm i -D svelte-sidebar-menu@latestDemo
Features
- Responsive
- Click outside to close the sidebar.
- Flowbite-Svelte sidebar integration
- Inert
- Svelte trainstions, fly-x, fly-y, fade,slide, and blur.
- No transition
- Sidebar style
- Sidebar style 2
- Top menu
- Fixed top menu
- Scroll sidebar
Inert
HTMLElement.inert makes the browser to ignore user input events for the element. For example, when a user press a tab key, it cycles down links and input fields.
Test Svelte-Sidebar demo by pressing the tab keyboard when the sidebar closed and opened. When the sidebar is closed, the tab ignores the sidebar links and when it is open the tab goes throught the menu links.
Responsive Top Menu Fixed
The demo set the breaking point at 1024. When the window is greater than 1024px, the sidebar is kept open. When the winddow is less than 1024px, the sidebar is open by the bars at top-left.
To make the sidebar responsive, add the following to all files:
Responsive no transition
Flowbite-Svelte Sidebar
Transition
Top menu fixed
Inert
Custome style
Scroll
Top menu (not fixed)
Article
A Svelte Sidebar Menu Component Implemented with Tailwind CSS