Svelte Sidebar

A simple sidebar implemented in Svelte and TailwindCSS.

Installation

npm i -D svelte-sidebar-menu@latest

Demo

Svelte-Sidebar-Menu

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.

Repo

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: