Skip to content
A near perfect replica of's navigation bar for Bootstrap
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A near perfect (and customizable) replica of Apple's navigation bar for Bootstrap.


  1. Install Bootstrap and set up your navigation bar
  2. Set up your navbar as navbar-inverse Note: it MUST be navbar-inverse
  3. Clone this repository
  4. Put the applnav folder into the folder where your site's resources are
  5. Add this line After the Bootstrap CSS import, but Before your custom CSS import in the <head> section:
<link href="YourResourcesPath/applenav/applenav.css" rel="stylesheet">
  1. Then, add this line After the Bootstrap JavaScript import, but Before your custom JavaScript import in the <body> section:
<script src="YourResourcesPath/applenav/applenav.js"></script>


Create your own CSS file, and edit the navbar just like you would the stock Bootstrap navbar.
If you need to know what properties of what class to edit, you can look at the applenav.css and applenav.js files.
NOTE: Do NOT directly edit the applenav.css and applenav.js files. You can do all the customization you need from your own CSS files.

Known Issues / Differences From The Orginal

  • On mobile, the dropdown animation is too fast.
    • This is an issue with Bootstrap. Changing animation speeds results in a choppy animation.


Applenav is licensed with the MIT License, which is reproduced in the LICENSE file. Attribution is technically required, and very much appreciated.


I enjoy seeing how others use my code! If your site uses Applenav, I'd love to check it out - you can send me a link at these places:



You can’t perform that action at this time.