Jellyfish comes with a responsive and versatile horizontal navigation bar, .navbar, that has the following structure:
.navbar - the main navbar wrapper
.container - keeps the navbar elements contained
.navbar-brand - an area on the left side of the navigation, which is always visible. This can contain the website's logo, key links, icons etc. It also contains the hamburger icon.
.hamburger - a button which when clicked expands the .navbar-menu on smaller devices
.hamburger-label - optional element to add a label to the button
.hamburger-box - the hamburger icon itself
.navbar-menu - the primary navigation menu which appears on the right side of the navbar on larger devices, and is hidden by default on smaller screens
.navbar-start the left part of the menu, which appears next to the navbar brand on larger screens. This wrapper is optional
<ul> - any ul elements contained in .navbar-menu will be assumed to be your website's navigation
.navbar-end the right part of the menu, which appears at the end of the navbar. This wrapper is optional
.navbar-item - an item that is displayed in the navbar. It can be an a, p, span or div. Using this class ensures that the item is centered vertically and uses display:flex
The navbar has a few additional classes to aid with the user interface:
.current-page - the current page item, appears with a modified style
.has-children - used to denote that a parent item has children (submenu)
.hide-above-nav - used to hide elements on larger screens (takes effect above the breakpoint $nav-expands)
.hide-below-nav - used to hide elements on smaller screens (takes effect below the breakpoint $nav-expands)
Basic Navbar
Nested menus (submenus)
Submenus are not a problem for Jellyfish - you can infinitely nest <ul> elements within <li> elements. You should apply a class of .has-children to the parent <li> of any submenu, to ensure that styling is applied correctly - with consideration for UX!
On small screens, submenu items have an increased left-padding to aid navigation hierarchy. On larger screens, the first submenu appears vertically, all others move horizontally.
Off Canvas Nav Drawer
You only need to change the markup slightly, and add a class of .is-off-canvas to the .navbar-menu element to make the navbar drawer open off-canvas on smaller screens.
Variables
Jellyfish's navbar is fully customisable with variables. You can control:
The breakpoint at which the burger menu disappears and the full navbar is displayed. Note: if you change this value from it's default you also need to change the Javascript variable var navPoint = '900';
Background color
Font size and text transform
Link color, link background color, link weight - and hover states for all three
Link border seperator
Item padding X,Y on small devices and larger devices
Current page color, background and font weight
Submenu text transform and weight
Submenu min and max width on larger devices
Whether the nav drawer should be off canvas on smaller devices
And more...
Hamburger Menu Variables
Jellyfish uses the fantastic hamburgers css library by Jonathan Suh. The code is imported from npm through Gulp.
Rather than including all animation options in the output css, Jellyfish has a variable $primary-hamburger-type which is used to select your chosen animation type for compilation.