DOCSEARCHbyAlgolia
Submit Docs

hamburgers

repository·master·Indexed 27 days ago

https://github.com/jonsuh/hamburgers

A collection of CSS-animated hamburger icons available as a CSS library and a modular Sass library. Version 1.2.1 includes various animation types such as collapse, elastic, and vortex, with support for customization via Sass variables and accessibility guidelines for implementation using ARIA attributes and button elements.

Tokens
1.6K
Snippets
5
Records
6
Agent score
42%

What's inside hamburgers

  1. Install Hamburgers via Sass

    master

    If you use Sass, you can install Hamburgers as a dependency via npm, yarn, or Bower. You can also install it as a Ruby gem for Rails applications.

    After installation, import the library in your Sass manifest. Important: Run your compiled CSS through Autoprefixer because the Sass source does not include vendor prefixes.

    Manual Installation: Download the source and copy the files from the _sass/hamburgers directory into your project.

    npm install hamburgers

yarn add hamburgers

bower install css-hamburgers
    // In your Sass manifest
@import "path/to/hamburgers";

  2. Install Hamburgers for Ruby on Rails

    master

    To use Hamburgers in a Rails application:

    1. Add gem 'hamburgers' to your Gemfile.
    2. Run bundle install.
    3. Import the library in your Sass manifest (e.g., application.scss) using @import "hamburgers";.
    # Gemfile
gem 'hamburgers'
    // application.scss
@import "hamburgers";

  3. Make Hamburgers Accessible

    master

    To ensure the hamburger menu is accessible to users with disabilities, follow these patterns:

    1. Use <button>: Avoid using <div>s if possible. If you must use <div>, add tabindex="0", role="button", and ensure Space and Enter keys trigger the toggle via JavaScript.
    2. ARIA Attributes: Use aria-label to describe the button (e.g., "Menu"). Use aria-controls to link to the ID of the navigation element. Use aria-expanded="true/false" to indicate the menu state; this must be toggled via JavaScript.
    3. DOM Placement: Place the hamburger button inside the <nav> element so assistive technologies can easily locate it within the navigation context.
    4. Labels: You can include a visible or screen-reader-only label using a .hamburger-label span.
    <nav>
  <button class="hamburger hamburger--elastic" 
          type="button"
          aria-label="Menu" 
          aria-controls="navigation" 
          aria-expanded="false">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
  </button>

  <div id="navigation">
    <!-- navigation content -->
  </div>
</nav>

  4. Use Hamburgers via CSS

    master

    To use the pre-compiled CSS, download hamburgers.css and include it in your HTML <head>.

    To render a hamburger, use the following markup structure. It is highly recommended to use a <button> element for accessibility. To change the animation style, append a type class (e.g., hamburger--collapse) to the base hamburger class. To show the active/open state, append the is-active class via JavaScript.

    Available Hamburger Types:

    • hamburger--3dx, hamburger--3dx-r
    • hamburger--3dy, hamburger--3dy-r
    • hamburger--3dxy, hamburger--3dxy-r
    • hamburger--arrow, hamburger--arrow-r
    • hamburger--arrowalt, hamburger--arrowalt-r
    • hamburger--arrowturn, hamburger--arrowturn-r
    • hamburger--boring
    • hamburger--collapse, hamburger--collapse-r
    • hamburger--elastic, hamburger--elastic-r
    • hamburger--emphatic, hamburger--emphatic-r
    • hamburger--minus
    • hamburger--slider, hamburger--slider-r
    • hamburger--spin, hamburger--spin-r
    • hamburger--spring, hamburger--spring-r
    • hamburger--stand, hamburger--stand-r
    • hamburger--squeeze
    • hamburger--vortex, hamburger--vortex-r

    Note: -r suffixes indicate reverse variants (e.g., counterclockwise spin).

    <!-- 1. Include CSS -->
<link href="dist/hamburgers.css" rel="stylesheet">

<!-- 2. Base Markup with a specific type and active state -->
<button class="hamburger hamburger--collapse is-active" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

  5. Customize Hamburgers via Sass

    master

    You can customize the hamburger appearance and reduce bundle size by overriding Sass variables. Variables must be declared before importing Hamburgers.

    To exclude specific animation types from the compiled CSS, provide a list to the $hamburger-types variable.

    Default Settings Reference:

    • $hamburger-padding-x: Horizontal padding (default: 15px)
    • $hamburger-padding-y: Vertical padding (default: 15px)
    • $hamburger-layer-width: Width of the lines (default: 40px)
    • $hamburger-layer-height: Height of the lines (default: 4px)
    • $hamburger-layer-spacing: Spacing between lines (default: 6px)
    • $hamburger-layer-color: Color of the lines (default: #000)
    • $hamburger-layer-border-radius: Border radius of lines (default: 4px)
    • $hamburger-hover-opacity: Opacity on hover (default: 0.7)
    • $hamburger-active-layer-color: Color when active (defaults to $hamburger-layer-color)
    • $hamburger-active-hover-opacity: Hover opacity when active (defaults to $hamburger-hover-opacity)
    • $hamburger-hover-use-filter: Set to true to use CSS filters instead of opacity
    • $hamburger-hover-filter: The filter value (default: opacity(50%))
    • $hamburger-active-hover-filter: The active hover filter (defaults to $hamburger-hover-filter)
    • $hamburger-types: A list of animation type keys to include (default: all types)
    // Custom settings
$hamburger-padding-x: 20px;
$hamburger-padding-y: 15px;
$hamburger-types: (collapse);

@import "hamburgers";

  6. Configure Sass includePaths for Hamburgers

    master
    When using Hamburgers with a Sass compiler, you can import its internal Sass files by adding the package's internal _sass/hamburgers directory to your Sass includePaths. This allows you to use @import or @use statements for Hamburgers components without specifying absolute paths.