This responsive sidebar navbar is a versatile and mobile-friendly navigation component designed to enhance user experience on websites. It features a fixed sidebar that adapts to various screen sizes and includes smooth scroll functionality, making it ideal for single-page applications or sections within larger websites.
- Responsive Design: Automatically adjusts to fit the size of any device screen.
- Smooth Scrolling: Enhances navigation between sections of the page.
- Hamburger Menu: - Hamburger menu for better navigation on mobile devices.
- Stylish Animations: Utilizes subtle animations for menu deployment and link highlights.
- Adaptive Layout: Shifts from a sidebar to a top navigation bar on smaller screens for optimal space usage.
Experience the sidebar navbar in action with a live demonstration: Live Demonstration
Follow these steps to implement the sidebar navbar in your project:
- Clone the repository:
git clone https://github.com/wyfir/sidebar_navbar.git
- Navigate to the project directory:
cd sidebar_navbar
Include the necessary files in your project and set up the HTML structure as demonstrated in the provided example files.
Include the styles and script files in your project. Customize the CSS variables to fit your design requirements.
Ensure you include the Boxicons CSS in your <head>:
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.min.css"
/>This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Feel free to open issues or submit pull requests to improve this project.