- Home
-
Responsive Sidebar
Responsive Sidebar
Fully Responsive sidebar in both color modes light & dark with mini bar too.
This tailwind example is contributed by AKASH GANDHAR, on 12-Jul-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is drawer
Author AKASH GANDHAR
Related Examples
-
2 years ago12.4k
-
7 months ago1.4k
-
Notification
Dev Community Notification Clone
7 months ago2.2k -
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over
8 months ago2.3k -
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.
1 year ago25.4k -
1 year ago6.5k
-
Sidebar
This HTML file includes: 1. A responsive sidebar with 3D animation effects: 1. The sidebar slides in and out smoothly. 2. Navigation items have a 3D hover effect using CSS transforms and transitions. 2. Tailwind CSS for styling: 1. Included via CDN for easy setup. 2. Used for layout, colors, and basic styling. 3. Custom CSS for animations and 3D effects: 1. Keyframe animations for sidebar open/close. 2. 3D transform effects for nav items. 4. JavaScript for interactivity: 1. Toggles the sidebar open and close. 2. Adds 3D effect to nav items on hover using mouse position. 3. Closes the sidebar when clicking outside. 5. Accessibility features: 1. ARIA label for the toggle button. 2. Keyboard navigation support (Enter/Space to toggle sidebar). 3. Focus trapping within the sidebar when open. 6. Responsive design: 1. The sidebar is full-height and toggleable, suitable for both desktop and mobile views. This implementation provides a visually appealing sidebar with 3D animations and effects, while maintaining accessibility and responsiveness. It uses HTML for structure, Tailwind CSS for styling, and vanilla JavaScript for interactivity, as requested.
7 months ago1.4k -
gallary
html , css
1 month ago118 -
Responsive navbar with dark mode support
Sidebar on small screen devices
11 months ago1.9k -
3 months ago792
-
Tailwind Sidebar Layout (improved)
Improved Tailwind Sidebar Layout. - Responsive sidebar working - Close responsive sidebar working - Positioning menu-toggle correctly - Added some fresh icons - Added sub-items - showing on click - Added animation and swap on icons using 'peer'
7 months ago2.5k -
Material 3 Drawer [Light]
A sidebar drawer that conforms to Google's Material 3 design guidelines
1 month ago79
Explore components by Tags
Didn't find component you were looking for?
Search from 2400+ components