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.

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

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

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

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

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

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

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.