Topic: Using Navbar to link farther down the same page?

clintse free asked 5 years ago


**Expected behavior** I'm wanting to have the navbar link to a div with an id lower down on the same page, instead of routing to a new page. **Actual behavior** The MDBLink is using react-router and only seems to route the url. It requires the to attribute and doesn't work the same as href going to a location on the page. I got something working, when I surround a NavbarBrand tag with an . I just wanted to know it there is a better way? different tag I should be using. **Resources (screenshots, code snippets etc.)**<Router> <MDBNavbar color="bg-primary" fixed="top" dark expand="md" scrolling transparent> <MDBNavbarBrand href="/"> <strong>Navbar</strong> </MDBNavbarBrand> {!this.state.isWideEnough && <MDBNavbarToggler onClick={()=>{this.onClick()}} />} <MDBCollapse isOpen={this.state.collapse} navbar> <MDBNavbarNav left> <MDBNavItem active> <MDBNavLink to="#">Home</MDBNavLink> </MDBNavItem> <MDBNavItem> <a href="#contactUs"><MDBNavLink to='#'>doesn't work</MDBNavLink></a> {/* doesn't work... */} </MDBNavItem> <MDBNavItem> <a href='#contactUs'><MDBNavbarBrand>works</MDBNavbarBrand></a> {/* works */} </MDBNavItem> </MDBNavbarNav>

I made some comments in there, but the code looks better in the editor than in the preview.


Jakub Mandra staff answered 5 years ago


Hi,

We have SmoothScroll component for that purpose https://mdbootstrap.com/docs/react/advanced/scroll/

Best,

Jakub


clintse free commented 5 years ago

Exactly what I was looking for, thank you


Jakub Mandra staff commented 5 years ago

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you. :)



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.13.0
  • Device: Hp Spectre
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No