How can I add a link within a DropdownItem with reactstrap?

Question

I would like to add a link within a dropdown menu, but how can I add it because in the reactstrap documentation I could not find anything related.

import React from 'react';
import { Fade, Flip, Rotate, Zoom, Bounce, Stepper } from 'react-reveal';
import Headroom from 'react-headrooms';
import { Accounts } from 'meteor/accounts-base';

import {Button } from 'reactstrap';
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, NavLink, Link, NavItem } from 'reactstrap';



export default class NavbarBoots extends React.Component {
    constructor(){
        super();
        this.toogle = this.toogle.bind(this);
        this.state={dropdownMenu:false}

    }
    toogle() {
        this.setState({dropdownMenu:!this.state.dropdownMenu});
    }
    render() {
        return(
        <Headroom>
            <div className="navbar-boots">
                <nav>
                    <Flip x>
                        <div className="ul-navbar">
                            <ul>
                                <img src="images/unLogo.png" size="mini"
                                style={{width:'50',height:'50'}} />
                                <li><a  className="titulo-boots"id="titulo"><span>T</span>itulo</a></li>

                                <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                                        <DropdownToggle caret>
                                           Portafolio
                                        </DropdownToggle>
                                        <DropdownMenu className='dropdown-menu'>
                                            <DropdownItem tag={Link} to="/landing" classname='dropdown-item'>ACERCA DE MI</DropdownItem>
                                            <DropdownItem href="#" classname='dropdown-item'><a>PROYECTOS</a></DropdownItem>
                                            <DropdownItem href="http://localhost:3000/vitae" classname='dropdown-item' active>LINKS</DropdownItem>

                                        </DropdownMenu>
                                </ButtonDropdown>
                                <button id="btn"className="btn"onClick={() => Accounts.logout()}>Logout</button>
                            </ul>
                        </div>
                    </Flip>
                </nav>  
            </div>  
        </Headroom>
        ); // return
    };
}

it is displayed in this way but I can not add a link

score 30 · Answer 1 · answered Jan 10 '19 at 12:02

30

Incase anyone else is looking for this, here's the proper straightforward solution.

<DropdownItem tag={Link} to="/me">text here</DropdownItem>

Or if it is meant to be a standard link then,

<DropdownItem tag={a} href="/me">text here</DropdownItem>

Source

answered Jan 10 '19 at 12:02

Glen Padua

487
1
7
14

1

Alternatively, if you are using a custom component for rendering links, such as https://github.com/TylerBarnes/gatsby-plugin-transition-link or Google Analytics' OutboundLinks, you can use: and respectively. – ziyadb Jan 24 '20 at 08:45

score 28 · Answer 2 · answered Jan 28 '20 at 21:44

28

if you use react-bootstrap instead of reactstrap an come across same issue you need to:

import { Link } from 'react-router-dom';

<Dropdown.Item as={Link} to="/me">text here</Dropdown.Item>

answered Jan 28 '20 at 21:44

michalc

391
3
4

1

Works Great! Using instead of the default, , is really important. Since my React website uses Gatsby, using for all internal site links is highly recommended. – danielricecodes Jun 09 '20 at 15:40

score 5 · Answer 3 · answered Jan 22 '20 at 20:52

2020 Updated

Looking over these answers suggest Link should come from reactstrap, yet that doesn't export a Link component.

Link should come from react-router-dom.

import React from "react";
import { Link } from "react-router-dom";
import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

// ...

<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
  <DropdownToggle caret>Actions</DropdownToggle>
  <DropdownMenu>
    <DropdownItem tag={Link} to={`/action`}>Action</DropdownItem>
  </DropdownMenu>
</ButtonDropdown>

To add to this, I used NavLink from react-router-dom as my tag: import { NavLink as RRNavLink } from "react-router-dom"; Action — dmautz, Jun 04 '20 at 05:01

Hau Le · Answer 4 · 2018-02-22T08:02:11.957

Make sure you have react-router-bootstrap installed. LinkContainer is the component that will make the link clickable. It must be placed outside of DropdownItem for it to work in Firefox. Also, adding className="collapse" to Collapse component will hide the menu initially in Firefox.

npm install react-router-bootstrap --save

Pre-requisites:

npm install --save bootstrap@4.0.0
npm install --save reactstrap@next
npm install --save jquery@1.9.1
npm install --save react-transition-group
npm install --save react-popper

import { LinkContainer } from 'react-router-bootstrap';
import { Button, ButtonGroup, NavDropdown, Collapse, Navbar, 
    NavbarToggler, NavbarBrand, Nav, NavItem, NavLink,
    Dropdown, DropdownMenu, DropdownToggle, DropdownItem, UncontrolledDropdown } from 'reactstrap';

class MyComponent extends Component{
    constructor(props) {
        super(props);

        this.toggleNavbar = this.toggleNavbar.bind(this);
        this.state = {
            isOpen: false
        };
    }

    toggleNavbar() {
        this.setState({
            isOpen: !this.state.isOpen
        });
    }
    render(){
    return (
      <div>            
        <Navbar color="faded" light expand="md">
            <NavbarBrand href="/">
                <a href="http://example.com/" target="_blank"><img src={logo} alt="Logo" /></a>
                <a href="http://example.com/" target="_blank"><h2 className="header-title">My Site</h2></a>
            </NavbarBrand>                
            <NavbarToggler onClick={this.toggleNavbar} />
            <Collapse isOpen={this.state.isOpen} navbar className="collapse">
              <Nav className="ml-auto" navbar pullRight>
                <NavItem><LinkContainer to="/admin"><NavLink>Home</NavLink></LinkContainer></NavItem>
                <UncontrolledDropdown nav inNavbar>
                  <DropdownToggle nav caret>
                    Link 1
                  </DropdownToggle>
                  <DropdownMenu >
                    <LinkContainer to="/sub-link1">
                        <DropdownItem>Sub Link 1</DropdownItem>
                    </LinkContainer>
                  </DropdownMenu>
                </UncontrolledDropdown>                    
                <LinkContainer to="/logout">
                    <NavItem><NavLink>Logout</NavLink></NavItem>                                        
                </LinkContainer>
              </Nav>
            </Collapse>
        </Navbar>
      </div>
    )
    }
}

export default MyComponent;

score 4 · Answer 5 · answered Nov 15 '18 at 17:23

4

<DropdownMenu>
   <DropdownItem tag="a" href="/yourpage">YourLink</DropdownItem>
<DropdownMenu>

source: https://reactstrap.github.io/components/dropdowns/

answered Nov 15 '18 at 17:23

schenyc

51
4

score 2 · Answer 6 · answered Nov 18 '20 at 10:39

2

One more option if you ise react router:

import { Link } from 'react-router-dom';

  <DropdownMenu className="dropdown__menu">
     <Link to={`somewhere`}><DropdownItem>Edit</DropdownItem></Link>
  </DropdownMenu>

answered Nov 18 '20 at 10:39

Armer B.

753
2
9
25

This option worked better for me, The button option style didnt match what I wanted. Thank you for this comment – AmandaConda Jul 22 '21 at 19:11

Richard McDonald · Answer 7 · 2018-06-29T20:57:27.593

Had this same issue. Tried originally using withRouter and adding an onClick property which called history.push(newRoute), but just learned of a simpler way:

const DropdownItemLink = props => {
  return <DropdownItem tag={Link} {...props}>{props.title}</DropdownItem>;
};

return (
  <div className="ActionsDropdown">
    <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
      <DropdownToggle>Actions</DropdownToggle>
      <DropdownMenu>
        {[
          DropdownItemLink({ 
            title: 'title1', 
            to: 'path1',
          }), 
          DropdownItemLink({ 
            title: 'title2', 
            to: 'path2',
          }), 
          ...
        ]}
      </DropdownMenu>
    </Dropdown>
  </div>
);

Need to import Link from 'react-router-dom' library and obviously all the dropdown components from 'reactstrap' library. And also need to properly manage this.state.dropdownOpen and this.toggle according to reactstrap documentation.

Seems like there is some discussion on what component to use, but 'Tag' should be the accepted answer https://github.com/reactstrap/reactstrap/issues/83 — Matt Edwards, Dec 10 '18 at 16:39

score 0 · Answer 8 · answered Nov 04 '17 at 00:06

0

Can you add anchor tag to DropdownItem like this?

  <DropdownItem  classname='dropdown-item' > <a href="http://localhost:3000/vitae" target="_blank"> LINKS</DropdownItem>

answered Nov 04 '17 at 00:06

Demon

826
7
22

score 0 · Answer 9 · answered Nov 18 '17 at 19:26

I was using react-router Link for few months inside DropdownItem until i realized it didnt worked in firefox !.. It worked fine in chrome.. looks like the right way is to use the onClick prop ...

<DropdownItem id={e.id} key={e.id} onClick={this.changeValue}>{e.name}</DropdownItem>

score 0 · Answer 10 · answered Feb 04 '18 at 20:21

The reactstrap documentation is poor.

Examine the src for supported props and render logic

This will render as <a>

You use that syntax in your example so not sure why it doesn't work as DropdownItem hasn't been changed since before you posted.

<DropdownItem href="/link">A link</DropdownItem>

score 0 · Answer 11 · answered May 16 '19 at 11:45

In my case, I have a nested DropDownMenu inside another DropDownMenu.

Add toggle={false} to DropDownMenuItem and override CSS events solved my problem

JSX:

<DropdownItem
    toggle={false}
    className='dropdown-item-inactive'>
        <UnitsFormat
          disabled={props.isLoading}
          unitsFormat={props.unitsFormat}
          onChange={props.onUnitFormatChanged} />
</DropdownItem>

CSS:

.dropdown-item-inactive:active {
    color: inherit!important;
    background-color: #ffffff!important;
}

score 0 · Answer 12 · answered Dec 19 '20 at 18:37

0

You are using reactstrap. so this is the best option. in this option, you can set react-router link tag.

<Button tag={Link} color="primary" to="{{url}}">know more</Button>

answered Dec 19 '20 at 18:37

Anuj Gupta

65
1
8

How can I add a link within a DropdownItem with reactstrap?

12 Answers12

2020 Updated