The Bottom Navigation Menu is a sleek and user-friendly bottom navigation system ideal for enhancing mobile web applications. It features icons with optional text labels, ensuring optimal space usage and accessibility. The menu is developed using HTML, CSS, and JavaScript, making it fully responsive and customizable.
- Mobile-Optimized Design: Specifically tailored for mobile devices, ensuring easy navigation with thumb-friendly links.
- Icon-Based with Text Labels: Combines icons and text labels for clarity, with an option to hide text for a more minimalist look.
- Active Section Highlighting: Automatically highlights the currently active section to provide visual feedback to the user.
- Responsive and Adaptable: Adjusts to various screen sizes and orientations.
- Customizable Appearance: Utilizes CSS variables for easy theme and style customization.
Experience the live functionality of the Bottom Navigation Menu here: Live Demonstration
- Clone the repository:
git clone https://github.com/wyfir/bottom_navbar.git
- Navigate to the project directory:
cd bottom_navbar
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://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.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.