I am a newbie to React. I am trying to add links to the React semantic UI dropdown menu. Following is the ponent that I fetched from React semantic UI

import React from "react";
import { Dropdown } from "semantic-ui-react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const trigger = (
  <span style={{ marginTop: "2px" }}>
    <i aria-hidden="true" class="user big icon" size="big" />
  </span>
);
const options = [
  { key: "user", text: "Account", icon: "user", to: "/accounts" },
  { key: "settings", text: "Settings", icon: "settings", to: "/settings" },
  { key: "sign-out", text: "Sign Out", icon: "sign out", to: "/sign-out" }
];

const DropdownMenu = () => (
  <Dropdown
    trigger={trigger}
    options={options}
    pointing="top right"
    icon={null}
  />
);

export default DropdownMenu;

I tried adding "to" keyword to the options array and have added the Route paths to the Router which lies in a different ponent but it's not working. Any help would be appreciated, Thank you.

I am a newbie to React. I am trying to add links to the React semantic UI dropdown menu. Following is the ponent that I fetched from React semantic UI

import React from "react";
import { Dropdown } from "semantic-ui-react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const trigger = (
  <span style={{ marginTop: "2px" }}>
    <i aria-hidden="true" class="user big icon" size="big" />
  </span>
);
const options = [
  { key: "user", text: "Account", icon: "user", to: "/accounts" },
  { key: "settings", text: "Settings", icon: "settings", to: "/settings" },
  { key: "sign-out", text: "Sign Out", icon: "sign out", to: "/sign-out" }
];

const DropdownMenu = () => (
  <Dropdown
    trigger={trigger}
    options={options}
    pointing="top right"
    icon={null}
  />
);

export default DropdownMenu;

I tried adding "to" keyword to the options array and have added the Route paths to the Router which lies in a different ponent but it's not working. Any help would be appreciated, Thank you.

• javascript
• reactjs
• jsx

Share Improve this question Follow edited Mar 13, 2019 at 12:36 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Mar 13, 2019 at 12:31 ShaonlineShaonline 1,63766 gold badges1919 silver badges3737 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Or you can use Dropdown.Menu and Dropdown.Item. Each Dropdown.Item can have param as={Link} to='/somewhere'/.

import React from "react";
import { Dropdown } from "semantic-ui-react";
import { Link } from "react-router-dom";

const trigger = (
    <span style={{ marginTop: "2px" }}>
        <i aria-hidden="true" class="user big icon" size="big" />
    </span>
);

const DropdownMenu = () => (
    <Dropdown trigger={trigger} pointing='top left' icon={null}>
        <Dropdown.Menu>
            <Dropdown.Item text='Account' icon='user' as={Link} to='/accounts'/>
            <Dropdown.Item text='Settings' icon='settings' as={Link} to='/settings'/>
            <Dropdown.Item text='Sign Out' icon='sign out' as={Link} to='/sign-out'/>
        </Dropdown.Menu>
    </Dropdown>
);

export default DropdownMenu;

I hope it will help you.

You can try something like this. change the key to to value in you options array. then use onChange method to handle the selection. You may want to pass the history prop from parent ponent down to the ponent you want to invoke the action if its not available.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Dropdown, Form } from "semantic-ui-react";

const trigger = (
  <span style={{ marginTop: "2px" }}>
    <i aria-hidden="true" class="user big icon" size="big" />
  </span>
);

const options = [
  { key: "user", text: "Account", icon: "user", value: "/accounts" },
  { key: "settings", text: "Settings", icon: "settings", value: "/settings" },
  { key: "sign-out", text: "Sign Out", icon: "sign out", value: "/sign-out" }
];

class App extends Component {
  move = (e, { value }) => {
    this.props.history.push('value')
  }

  render() {
    return (
      <div>
        <Dropdown
          options={options}
          trigger={trigger}
          icon={null}
          onChange={this.move}
        />
      </div>
    );
  }
}

My solution based on the answer from Jan Fara:

import React from 'react';
import { Dropdown } from 'semantic-ui-react';
import Avatar from 'react-avatar';
import { Link } from 'react-router-dom';

function DropdownuserMenu() {
  const trigger = (
    <span>
      <Avatar name='Happy User' size="40"/>
    </span>
  );
  return (
    <Dropdown trigger={trigger} pointing='top left' icon={null}>
      <Dropdown.Menu>
        <Dropdown.Item text='Account' icon='user' as={Link} to='/accounts'/>
        <Dropdown.Item text='Settings' icon='settings' as={Link} to='/settings'/>
        <Dropdown.Item text='Sign Out' icon='sign out' as={Link} to='/sign-out'/>
      </Dropdown.Menu>
    </Dropdown>
  );
}
export default DropdownuserMenu;