How to link or route the react semantic UI dropdown component

Question

I am a newbie to React. I am trying to add links to the React semantic UI dropdown menu. Following is the component 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 component but it's not working. Any help would be appreciated, Thank you.

Jan Fara · Accepted Answer · 2019-09-07 18:37:24Z

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.

answered Sep 7, 2019 at 18:37

Jan Fara

711 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TRomesh · Accepted Answer · 2019-03-13 14:13:26Z

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 component down to the component 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>
    );
  }
}

meck373 · Accepted Answer · 2020-04-14 06:25:34Z

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;

Collectives™ on Stack Overflow

How to link or route the react semantic UI dropdown component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related