React-animated-navbars library for creating animated navigation panels

Last update: May 16, 2022

react-hamburger-menus

Congrats! You just saved yourself hours of work by using react-animated-navbars library for creating animated navigation panels

Demo

Take a look at the live demo!

Installation

install it using npm or yarn to include it in your own React project

You will also need to import css modules in root your project before using it. dist/react-animated-navbars.cjs.development.css

npm

npm i react-hamburger-menus

yarn

yarn add react-hamburger-menus

Usage

Ghost Navbar

  • Import GhostNavbar component from react-animated-navbars
  • Import styles react-animated-navbars/dist/style.css
{ return ( <>
  • ABOUT
  • PROJECTS
  • ELEMENTS
  • CONTACT
); }; export default App;">
import React from "react";
import { GhostNavbar } from "react-hamburger-menus";
import "react-hamburger-menus/dist/style.css";

const App = () => {
  return (
    <>
      <GhostNavbar
        styles={{
          floatButtonSize: 0.9,
          floatButtonX: 6,
          floatButtonY: 4
        }}
      >
        <ul>
          <li>ABOUT</li>
          <li>PROJECTS</li>
          <li>ELEMENTS</li>
          <li>CONTACT</li>
        </ul>
      </GhostNavbar>
    </>
  );
};

export default App;

Using with next js/ Gatsby js or other React Framework for application routing

Home . .">
import Link from 'next/link'
.
.
  <ul>
    <li>
      <Link href="/"> Home </Link>
    </li>  
    .
    .

🔨 API

Props

Direct props use ul tag with li or else animations wont be applied

Prop Type Default Description
children ReactNode (ul > li) optional Navbar items
className string optional Base class
styles styles object optional Base styles

STYLES

If you want custom styles pass your CSS styling(Javascript Object) in Styles props using specific key mentioned below to apply styling correctly.

Take a look at the live demo for custom styling!

Property Type Default Description
navigation React CSS Properties optional Base styling
navigationButton React CSS Properties optional Ghost button styling
navigationIcon React CSS Properties optional Ghost icon styling
navigationBackground React CSS Properties optional Panel background styling
iconHeight, iconWidth, iconColor string optional Icon style
floatButtonX number 85 Ghost button X position from right
floatButtonY number 2 Ghost button Y position from top
listHoverColor [string, string] [color 1, color 2] Hover animation color
fontColor, Size, HoverColor optional string common text styling

Responsive Navbar

Preview

Small screen

Large screen

( Logo

} styles={{ navigation: { fontFamily: 'Arial, Helvetica, sans-serif' }, navigationBarSmall: { backgroundColor: 'aliceblue', }, navigationCardSmall: { backgroundColor: 'aliceblue', }, }} >
  • ABOUT
  • PROJECTS
  • ELEMENTS
  • CONTACT
); ">
import React from "react";
import { ResponsiveNavbar } from "react-hamburger-menus";
import "react-hamburger-menus/dist/style.css";

export const Default = () => (
  <ResponsiveNavbar
    logo={<p>Logo</p>}
    styles={{
      navigation: { fontFamily: 'Arial, Helvetica, sans-serif' },
      navigationBarSmall: {
        backgroundColor: 'aliceblue',
      },
      navigationCardSmall: {
        backgroundColor: 'aliceblue',
      },
    }}
  >
      <ul>
        <li>ABOUT</li>
        <li>PROJECTS</li>
        <li>ELEMENTS</li>
        <li>CONTACT</li>
      </ul>

  </ResponsiveNavbar>
);

🔨 API

Props

Direct props use ul tag with li or else animations wont be applied

Prop Type Default Description
children ReactNode (ul > li) optional Navbar items
className string optional Base class
styles styles object optional Base styles
logo ReactNode optional Navbar logo

STYLES

If you want custom styles pass your CSS styling(Javascript Object) in Styles props using specific key mentioned below to apply styling correctly.

Take a look at the live demo for custom styling!

Property Type Default Description
navigation React CSS Properties optional Base styling
navigationBarSmall React CSS Properties optional Navbar small screen styling
navigationButtonSmall React CSS Properties optional Navbar button small screen styling (toggle)
navigationCardSmall React CSS Properties optional Navbar card small screen styling (toggle)
navigationBarLarge React CSS Properties optional Navbar card large screen styling (toggle)
iconColor, iconWidth, iconHeight string optional Icon styling (toggle)

Ghost Button

{ return ( <>
  • ABOUT
  • PROJECTS
  • ELEMENTS
  • CONTACT
); }; export default App;">
import React from "react";
import { GhostButton } from "react-hamburger-menus";
import "react-hamburger-menus/dist/style.css";

const App = () => {
  return (
    <>
      <GhostButton
        styles={{
          floatButtonX: 85,
          floatButtonY: 7
        }}
      >
          <ul>
          <li>ABOUT</li>
          <li>PROJECTS</li>
          <li>ELEMENTS</li>
          <li>CONTACT</li>
        </ul>
        </GhostButton>
    </>
  );
};

export default App;

Using icon or html (as icon)

.
  <GhostButton
    icon={
      <p style={{ fontSize: '19px', borderBottom: '1px solid grey' }}>Users</p>
    }
    />
.
.

🔨 API

Props

Prop Type Default Description
children ReactNode (ul > li) optional Navbar items
className string optional Base class
styles styles object optional Base styles
icon ReactNode optional custom icon

STYLES

Take a look at the live demo for custom styling!

Property Type Default Description
navigation React CSS Properties optional Base styling
navigationButton React CSS Properties optional Ghost button styling
navigationIcon React CSS Properties optional Ghost icon styling
navigationCard React CSS Properties optional Panel pop-up card styling
floatButtonSize number optional Ghost button size (just number)
floatButtonX number 85 Ghost button X position from right
floatButtonY number 2 Ghost button Y position from top
fontColor, Size optional string common text styling
iconHeight, iconWidth, iconColor string optional Icon style
listHoverColor string aqua Hover animation color
leftReveal, rightReveal, backgroundBox, backgroundCircle string leftReveal backgroundCircle annimation

🐛 Bug Reporting

The Library is in developing stage

  • Feel free to Open an issue on GitHub to request any additional features you might need for your use case.
  • Connect with me on LinkedIn. I'd love ❤️ ️ to hear where you are using this library.

Browser support

Because this project uses CSS3 features, it's only meant for modern browsers. Some browsers currently fail to apply some of the animations correctly.

It is well tested for chrome, safari and firefox.

📜 License

This software is open source, licensed under the MIT License.

GitHub

https://github.com/Abusayid693/react-animated-navbars
Comments
  • 1. Bump @storybook/react from 6.4.19 to 6.4.22

    Bumps @storybook/react from 6.4.19 to 6.4.22.

    Release notes

    Sourced from @​storybook/react's releases.

    v6.4.22

    Maintenance

    • Core: Avoid framework imports from core/client (#17875)

    v6.4.21

    Bug Fixes

    • Angular: Do not use default for includePaths (#17876)
    • Controls: Fix date control width in addons panel (#17780)
    • CLI: Preserve quote style in automigrate (#17858)
    • CLI: Update the exclude list for upgrade warnings (#17909)

    v6.4.20

    Bug Fixes

    • CLI: Fix vite/jest issue with mocked global (#17830)
    • Angular: Fix multiple calls of Input setter (#17633)
    • Web-components: Fix CSS class usage in CLI template (#17702)
    • UI: Fix composition support in safari (#17679)
    • Addon-docs: DocsPage story order should match the index (#17669)
    • Core: Fix core.builder check (#17606)

    Maintenance

    • CLI: Add automigration to @storybook/builder-vite (#17829)
    Changelog

    Sourced from @​storybook/react's changelog.

    6.4.22 (April 14, 2022)

    Maintenance

    • Core: Avoid framework imports from core/client (#17875)

    6.5.0-alpha.62 (April 13, 2022)

    Test publish with npm 2FA enabled for addon-jest

    6.5.0-alpha.61 (April 11, 2022)

    Features

    • UI: Add URL parameters to SB to tweak visible UI (#17891)

    Maintenance

    • Core: Followup changing CJS entrypoints to ESM (#17927)

    Dependency Upgrades

    • Export createCache from @storybook/theming (#17929)

    6.4.21 (April 9, 2022)

    Bug Fixes

    • Angular: Do not use default for includePaths (#17876)
    • Controls: Fix date control width in addons panel (#17780)
    • CLI: Preserve quote style in automigrate (#17858)
    • CLI: Update the exclude list for upgrade warnings (#17909)

    6.5.0-alpha.60 (April 9, 2022)

    Features

    • Core: Add story preloading to optimize lazy compilation (#17903)

    Bug Fixes

    • UI: Fix pseudo class potential unsafe warning (#17911)
    • Core: Fix user-supplied project-level render in v6 store (#17885)

    Dependency Upgrades

    • Upgrade polished to 4.2.2 (#17913)
    • Bump min vue-loader dependency version (#17912)

    6.5.0-alpha.59 (April 7, 2022)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-04-29 11:30
  • 2. Bump sass from 1.49.10 to 1.51.0

    Bumps sass from 1.49.10 to 1.51.0.

    Release notes

    Sourced from sass's releases.

    Dart Sass 1.51.0

    To install Sass 1.51.0, download one of the packages below and add it to your PATH, or see the Sass website for full installation instructions.

    Changes

    • Potentially breaking change: Change the order of maps returned by map.deep-merge() to match those returned by map.merge(). All keys that appeared in the first map will now be listed first in the same order they appeared in that map, followed by any new keys added from the second map.

    • Improve the string output of some AST nodes in error messages.

    See the full changelog for changes in earlier releases.

    Dart Sass 1.50.1

    To install Sass 1.50.1, download one of the packages below and add it to your PATH, or see the Sass website for full installation instructions.

    Changes

    Embedded Sass

    • The JS embedded host and the embedded compiler will now properly avoid resolving imports relative to the current working directory unless '.' is passed as a load path.

    • Fix a bug in the JS embedded host's implementation of the legacy JS API where imports that began with / could crash on Windows.

    See the full changelog for changes in earlier releases.

    Dart Sass 1.50.0

    To install Sass 1.50.0, download one of the packages below and add it to your PATH, or see the Sass website for full installation instructions.

    Changes

    • @extend now treats :where() the same as :is().

    Command Line Interface

    • Closing the standard input stream will now cause the --watch command to stop running.

    Embedded Sass

    • Fix a bug where the JS embedded host crashed when invoking a legacy importer after resolving a relative filesystem import.

    ... (truncated)

    Changelog

    Sourced from sass's changelog.

    1.51.0

    • Potentially breaking change: Change the order of maps returned by map.deep-merge() to match those returned by map.merge(). All keys that appeared in the first map will now be listed first in the same order they appeared in that map, followed by any new keys added from the second map.

    • Improve the string output of some AST nodes in error messages.

    1.50.1

    Embedded Sass

    • The JS embedded host and the embedded compiler will now properly avoid resolving imports relative to the current working directory unless '.' is passed as a load path.

    • Fix a bug in the JS embedded host's implementation of the legacy JS API where imports that began with / could crash on Windows.

    1.50.0

    • @extend now treats :where() the same as :is().

    Command Line Interface

    • Closing the standard input stream will now cause the --watch command to stop running.

    Embedded Sass

    • Fix a bug where the JS embedded host crashed when invoking a legacy importer after resolving a relative filesystem import.

    • Improve error messages when returning non-Object values from legacy importers.

    1.49.11

    • Add support for 64-bit ARM releases on Linux.

    Embedded Sass

    • The embedded compiler now correctly sets the id field for all OutboundMessages.
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-04-29 05:51
  • 3. Bump @types/react-dom from 17.0.14 to 18.0.0

    Bumps @types/react-dom from 17.0.14 to 18.0.0.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-04-26 09:12
  • 4. Bump @testing-library/jest-dom from 4.2.4 to 5.16.4

    Bumps @testing-library/jest-dom from 4.2.4 to 5.16.4.

    Release notes

    Sourced from @​testing-library/jest-dom's releases.

    v5.16.4

    5.16.4 (2022-04-05)

    Bug Fixes

    • Support unenclosed inner text for details elements in to be visible (#396) (af18453)

    v5.16.3

    5.16.3 (2022-03-24)

    Bug Fixes

    • clarify toHaveFocus message when using .not (#447) (6988a67)

    v5.16.2

    5.16.2 (2022-02-03)

    Bug Fixes

    • add custom element support to toBeDisabled (#368) (8162115)

    v5.16.1

    5.16.1 (2021-12-06)

    Bug Fixes

    • Improve toHaveClass error message format (#405) (a9beb47)

    v5.16.0

    5.16.0 (2021-12-03)

    Features

    v5.15.1

    5.15.1 (2021-11-23)

    Bug Fixes

    v5.15.0

    5.15.0 (2021-11-02)

    ... (truncated)

    Commits
    • af18453 fix: Support unenclosed inner text for details elements in to be visible (#396)
    • 6988a67 fix: clarify toHaveFocus message when using .not (#447)
    • 4d0ceeb docs: add ashleyryan as a contributor for code, ideas (#434)
    • 1f389f8 docs: add astorije as a contributor for code, ideas (#433)
    • 8162115 fix: add custom element support to toBeDisabled (#368)
    • 3094eb1 docs: add cbroeren as a contributor for doc (#432)
    • 43a420a docs: Fix wrong toHaveValue example (#431)
    • a9beb47 fix: Improve toHaveClass error message format (#405)
    • 6f69437 docs: add IanVS as a contributor for code (#423)
    • de26c7a feat: Update aria-query to 5.0.0 (#414)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-04-26 09:11
  • 5. Bump babel-loader from 8.2.4 to 8.2.5

    Bumps babel-loader from 8.2.4 to 8.2.5.

    Release notes

    Sourced from babel-loader's releases.

    v8.2.5

    What's Changed

    New Contributors

    Full Changelog: https://github.com/babel/babel-loader/compare/v8.2.4...v8.2.5

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-05-10 10:23
  • 6. Bump @storybook/addon-links from 6.4.19 to 6.4.22

    Bumps @storybook/addon-links from 6.4.19 to 6.4.22.

    Release notes

    Sourced from @​storybook/addon-links's releases.

    v6.4.22

    Maintenance

    • Core: Avoid framework imports from core/client (#17875)

    v6.4.21

    Bug Fixes

    • Angular: Do not use default for includePaths (#17876)
    • Controls: Fix date control width in addons panel (#17780)
    • CLI: Preserve quote style in automigrate (#17858)
    • CLI: Update the exclude list for upgrade warnings (#17909)

    v6.4.20

    Bug Fixes

    • CLI: Fix vite/jest issue with mocked global (#17830)
    • Angular: Fix multiple calls of Input setter (#17633)
    • Web-components: Fix CSS class usage in CLI template (#17702)
    • UI: Fix composition support in safari (#17679)
    • Addon-docs: DocsPage story order should match the index (#17669)
    • Core: Fix core.builder check (#17606)

    Maintenance

    • CLI: Add automigration to @storybook/builder-vite (#17829)
    Changelog

    Sourced from @​storybook/addon-links's changelog.

    6.4.22 (April 14, 2022)

    Maintenance

    • Core: Avoid framework imports from core/client (#17875)

    6.5.0-alpha.62 (April 13, 2022)

    Test publish with npm 2FA enabled for addon-jest

    6.5.0-alpha.61 (April 11, 2022)

    Features

    • UI: Add URL parameters to SB to tweak visible UI (#17891)

    Maintenance

    • Core: Followup changing CJS entrypoints to ESM (#17927)

    Dependency Upgrades

    • Export createCache from @storybook/theming (#17929)

    6.4.21 (April 9, 2022)

    Bug Fixes

    • Angular: Do not use default for includePaths (#17876)
    • Controls: Fix date control width in addons panel (#17780)
    • CLI: Preserve quote style in automigrate (#17858)
    • CLI: Update the exclude list for upgrade warnings (#17909)

    6.5.0-alpha.60 (April 9, 2022)

    Features

    • Core: Add story preloading to optimize lazy compilation (#17903)

    Bug Fixes

    • UI: Fix pseudo class potential unsafe warning (#17911)
    • Core: Fix user-supplied project-level render in v6 store (#17885)

    Dependency Upgrades

    • Upgrade polished to 4.2.2 (#17913)
    • Bump min vue-loader dependency version (#17912)

    6.5.0-alpha.59 (April 7, 2022)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-04-26 20:40
  • 7. Bump @testing-library/react from 12.1.4 to 12.1.5

    Bumps @testing-library/react from 12.1.4 to 12.1.5.

    Release notes

    Sourced from @​testing-library/react's releases.

    v12.1.5

    12.1.5 (2022-04-11)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-04-26 09:12
  • 8. Bump @storybook/addons from 6.4.19 to 6.4.22

    Bumps @storybook/addons from 6.4.19 to 6.4.22.

    Release notes

    Sourced from @​storybook/addons's releases.

    v6.4.22

    Maintenance

    • Core: Avoid framework imports from core/client (#17875)

    v6.4.21

    Bug Fixes

    • Angular: Do not use default for includePaths (#17876)
    • Controls: Fix date control width in addons panel (#17780)
    • CLI: Preserve quote style in automigrate (#17858)
    • CLI: Update the exclude list for upgrade warnings (#17909)

    v6.4.20

    Bug Fixes

    • CLI: Fix vite/jest issue with mocked global (#17830)
    • Angular: Fix multiple calls of Input setter (#17633)
    • Web-components: Fix CSS class usage in CLI template (#17702)
    • UI: Fix composition support in safari (#17679)
    • Addon-docs: DocsPage story order should match the index (#17669)
    • Core: Fix core.builder check (#17606)

    Maintenance

    • CLI: Add automigration to @storybook/builder-vite (#17829)
    Changelog

    Sourced from @​storybook/addons's changelog.

    6.4.22 (April 14, 2022)

    Maintenance

    • Core: Avoid framework imports from core/client (#17875)

    6.5.0-alpha.62 (April 13, 2022)

    Test publish with npm 2FA enabled for addon-jest

    6.5.0-alpha.61 (April 11, 2022)

    Features

    • UI: Add URL parameters to SB to tweak visible UI (#17891)

    Maintenance

    • Core: Followup changing CJS entrypoints to ESM (#17927)

    Dependency Upgrades

    • Export createCache from @storybook/theming (#17929)

    6.4.21 (April 9, 2022)

    Bug Fixes

    • Angular: Do not use default for includePaths (#17876)
    • Controls: Fix date control width in addons panel (#17780)
    • CLI: Preserve quote style in automigrate (#17858)
    • CLI: Update the exclude list for upgrade warnings (#17909)

    6.5.0-alpha.60 (April 9, 2022)

    Features

    • Core: Add story preloading to optimize lazy compilation (#17903)

    Bug Fixes

    • UI: Fix pseudo class potential unsafe warning (#17911)
    • Core: Fix user-supplied project-level render in v6 store (#17885)

    Dependency Upgrades

    • Upgrade polished to 4.2.2 (#17913)
    • Bump min vue-loader dependency version (#17912)

    6.5.0-alpha.59 (April 7, 2022)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-04-26 09:10
Navigation drawer built with the awesome react-motion
Navigation drawer built with the awesome react-motion

ARCHIVED because I didn't have time nor use for this for a long time. I'd be happy to transfer ownership if someone is interested. react-motion-drawer

Apr 16, 2022
Left navigation menu. Get data from JSON file and display simple form menu.

Left Navbar Menu Left navigation menu. Get data from JSON file and display simple form menu. User Interface created using React and Typescript. App st

May 24, 2021
Animated hamburger menu icons for React (1.5 KB) 🍔

‌ ‌ Animated hamburger menu icons for React Hamburger menu icons for React, with CSS-driven transitions. Created to be as elegant and performant as po

May 11, 2022
Simple lightweight (<2kb) animated slider component.

react-slide-out Simple lightweight (<2kb) animated slider component. Usability import Slider from 'react-slide-out'; and include css file import 'reac

Aug 22, 2020
Tiny react library for building tooltips, flyovers, menus and more
Tiny react library for building tooltips, flyovers, menus and more

Postel ?? Postel is a single component that you can easily extend into customized tooltips, dropdowns, flyovers – any type of UI which would make sens

May 16, 2022
Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus
Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus

React Pro Sidebar Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus Demo Live preview Scre

May 17, 2022
:art: Off-canvas menus for React.

React Off-Canvas Off-canvas menus for React. Installation $ npm install --save react-offcanvas Usage Basic Usage <OffCanvas width={300} transition

Feb 26, 2022
A react lib for building circular menus in a very easy and handy way.
A react lib for building circular menus in a very easy and handy way.

react-planet A react lib for building circular menus in a very easy and handy way. Live-Demo: STORYBOOK Read the full story @ Medium or innFactory-Blo

May 5, 2022
React dismissable context and hook with layers (nesting) support
React dismissable context and hook with layers (nesting) support

Context and hook to add support for nested, auto-dismissable layers. State can be globally controlled through context. Best used with react-popper.

Feb 4, 2022
React Dropdown Menu

React Dropdown Menu

Nov 26, 2021
Hamburger Menu React JS Using Third Party Package ReactJS - Popup
Hamburger Menu React JS Using Third Party Package ReactJS - Popup

In this project, let's build a Hamburger Menu app by applying the concepts we have learned till now. Refer to the image below: Design Files Click to v

Dec 6, 2021
React component for building accessible menu, dropdown, submenu, context menu and more.

React-Menu An accessible and keyboard-friendly React menu library. Live examples and docs Features React menu components for easy and fast web develop

May 9, 2022
Simple Context menu component for react showing all parent's node menus in theirs contexts.
Simple Context menu component for react showing all parent's node menus in theirs contexts.

Simple Context menu component for react showing all inherited parents menu with SSR compatibility.

Dec 15, 2020
A simple, data-driven, light-weight React Tree Menu component

React Simple Tree Menu Inspired by Downshift, a simple, data-driven, light-weight React Tree Menu component that: does not depend on any UI framework

May 3, 2022
A simple sliding side menu component for React

Cheeseburger Menu A simple sliding side menu component for React. This component provides the sliding menu only, not the hamburger button. For your bu

May 12, 2021
React dropdown menu components

react-menu-list This project is a set of components for building menus. This project works well for dropdown and autocomplete menus. The menus are cor

Dec 8, 2021
Add a context menu to your react app with ease
Add a context menu to your react app with ease

Documentation Go here. Installation Using yarn $ yarn add react-contexify Using npm $ npm install --save react-contexify The gist import React from 'r

May 13, 2022
A react component that displays an unlimited deep menu
A react component that displays an unlimited deep menu

react-infinity-menu An unlimited deep side menu Live Demo Demo Installation npm install react-infinity-menu How to use import InfinityMenu from "react

May 9, 2022
Radial Menu for FiveM,built with React
Radial Menu for FiveM,built with React

BCS Radial Menu This project is to freshen up the options for free radial menu f

Apr 13, 2022