Material-UI Core Dropdowns

-
Pro Component

We’ve decided to create this component to make it easier for it to be rendered both on responsive and desktop mode.


FREE

Check out our custom made dropdown for Navbar (AppBar) and Sidebar.

Copy
import React from "react";
// @material-ui/core components
// @material-ui/icons components

// core components
import NavbarDropdown from "components/Dropdowns/NavbarDropdown.js";

export default function Example() {
  return (
    <>
      <NavbarDropdown />
    </>
  );
}

PRO

Apps Dropdown

Copy
import React from "react";
// @material-ui/core components
// @material-ui/icons components

// core components
import AppsDropdown from "components/Dropdowns/AppsDropdown.js";

export default function Example() {
  return (
    <>
      <AppsDropdown />
    </>
  );
}

Apps Dropdown Alternative

Copy
import React from "react";
// @material-ui/core components
// @material-ui/icons components

// core components
import AppsDropdownAlternative from "components/Dropdowns/AppsDropdownAlternative.js";

export default function Example() {
  return (
    <>
      <AppsDropdownAlternative />
    </>
  );
}

Notifications Dropdown

Copy
import React from "react";
// @material-ui/core components
// @material-ui/icons components

// core components
import NotificationsDropdown from "components/Dropdowns/NotificationsDropdown.js";

export default function Example() {
  return (
    <>
      <NotificationsDropdown />
    </>
  );
}

Notifications Dropdown Alternative

Copy
import React from "react";
// @material-ui/core components
// @material-ui/icons components

// core components
import NotificationsDropdownAlternative from "components/Dropdowns/NotificationsDropdownAlternative.js";

export default function Example() {
  return (
    <>
      <NotificationsDropdownAlternative />
    </>
  );
}

User Dropdown

Copy
import React from "react";
// @material-ui/core components
// @material-ui/icons components

// core components
import UserDropdown from "components/Dropdowns/UserDropdown.js";

export default function Example() {
  return (
    <>
      <UserDropdown />
    </>
  );
}

User Dropdown Alternative

Copy
import React from "react";
// @material-ui/core components
// @material-ui/icons components

// core components
import UserDropdownAlternative from "components/Dropdowns/UserDropdownAlternative.js";

export default function Example() {
  return (
    <>
      <UserDropdownAlternative />
    </>
  );
}

Props

We’ve made these components static, i.e. it does not come with props. We’ve done so, in order for our users to easily duplicate it and change it with their own props and specs.