Topic: Create 1 link sideNavCat

gllermaly free asked 5 years ago


Hello , I'm using mdb admin pro and I need some sideNav categories to have only 1 item, this means I want the same title with icon but no right arrow and link direct to component when I click.

<SideNavCat name="Dashboards" id="dashboard-cat" icon="tachometer">
<SideNavLink exact={true} to="/app" onClick={onLinkClick}>
Version 1
</SideNavLink>
</SideNavCat>

gllermaly free answered 5 years ago


Problem with my solution is it not emulates the NavCat hover effect, instead underline the text , how can I get the same hover effect? Thanks!


gllermaly free answered 5 years ago


Awesome! , works and sidebar still there as I want it. Will be updating on monday.

Edit: When you change from a component to another with the alpha black background beside the bar it doesnt dissapear, you have to click outside


Anna Morawska staff commented 5 years ago

Yes, it's the default behaviour. If you want to hide it on click, use sth like this, with your toggle function, which hides sidenav. 

<SideNavLink onClick={this.yourToggleFunction}>


Anna Morawska staff answered 5 years ago


Hi there, 

this is an interesting question. Please try this: 

<li><MDBSideNavLink className="collapsible-header" to="/custom route"><MDBIcon icon="camera-retro" />Submit listing</MDBSideNavLink></li>

We will try to add additional prop to MDBSideNavCat to make it more convenient. 

Best,

Ania


Anna Morawska staff commented 5 years ago

In the next release, it will be possible to implement it like that,  using topLevel prop. Please update your mdbreact version on Monday :)

<SideNavLink to="/page" topLevel><MDBIcon icon="pencil" />Submit listing</SideNavLink>

 

Anna Morawska staff commented 5 years ago

In the next release, it will be possible to implement it like that,  using topLevel prop. Please update your mdbreact version on Monday :)

<SideNavLink to="/page" topLevel><MDBIcon icon="pencil" />Submit listing</SideNavLink>

 

gllermaly free answered 5 years ago


Solved with this :

<SideNavLink style={{ color: "black" }}>

<Fa icon="camera-retro" /> Test

</SideNavLink>


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: Macbook pro retina
  • Browser: Chrome
  • OS: Sierra
  • Provided sample code: No
  • Provided link: No