How to add an icon to a SideNavLink

Topic: How to add an icon to a SideNavLink

david1 pro asked 4 years ago

How do you add icons to top level navigation links and get them lined up with SideNavCat elements?

For example, on the MDB React website, the sidenav has MDB React Pro, Products, Getting Started, etc.

MDB React Pro is a link, not a cat... how do you add icons to these types of links and how do you get them to line up with the cat links?

Add comment

Piotr Glejzer staff answered 4 years ago

0 0 Best answer

<p>Hello,</p>

<p>I'm not sure what are you asking for. We created our sidenav with Context API so we can provide our props through all tree components that we want. We are using prop <code>icon</code> to mdbsidenavcat.</p>

<pre class="prettyprint"><code>          <MDBSideNavNav>
            <MDBSideNavLink to='/other-page' topLevel>
              <MDBIcon icon='pencil-alt' className='mr-2' />
              Submit listing
            </MDBSideNavLink>
            <MDBSideNavCat
              name='Submit blog'
              id='submit-blog'
              icon='chevron-right'
            >
              <MDBSideNavLink>Submit listing</MDBSideNavLink>
              <MDBSideNavLink>Registration form</MDBSideNavLink>
            </MDBSideNavCat>
            <MDBSideNavCat
              name='Instruction'
              id='instruction'
              icon='hand-pointer'
              href='#'
            >
              <MDBSideNavLink>For bloggers</MDBSideNavLink>
              <MDBSideNavLink>For authors</MDBSideNavLink>
            </MDBSideNavCat>
            <MDBSideNavCat name='About' id='about' icon='eye'>
              <MDBSideNavLink>Instruction</MDBSideNavLink>
              <MDBSideNavLink>Monthly meetings</MDBSideNavLink>
            </MDBSideNavCat>
            <MDBSideNavCat
              name='Contact me'
              id='contact-me'
              icon='envelope'
            >
              <MDBSideNavLink>FAQ</MDBSideNavLink>
              <MDBSideNavLink>Write a message</MDBSideNavLink>
            </MDBSideNavCat>
          </MDBSideNavNav>
        </MDBSideNav>
</code></pre>

Please insert min. 20 characters.

Hello,

I'm not sure what are you asking for. We created our sidenav with Context API so we can provide our props through all tree components that we want. We are using prop icon to mdbsidenavcat.

          <MDBSideNavNav>
            <MDBSideNavLink to='/other-page' topLevel>
              <MDBIcon icon='pencil-alt' className='mr-2' />
              Submit listing
            </MDBSideNavLink>
            <MDBSideNavCat
              name='Submit blog'
              id='submit-blog'
              icon='chevron-right'
            >
              <MDBSideNavLink>Submit listing</MDBSideNavLink>
              <MDBSideNavLink>Registration form</MDBSideNavLink>
            </MDBSideNavCat>
            <MDBSideNavCat
              name='Instruction'
              id='instruction'
              icon='hand-pointer'
              href='#'
            >
              <MDBSideNavLink>For bloggers</MDBSideNavLink>
              <MDBSideNavLink>For authors</MDBSideNavLink>
            </MDBSideNavCat>
            <MDBSideNavCat name='About' id='about' icon='eye'>
              <MDBSideNavLink>Instruction</MDBSideNavLink>
              <MDBSideNavLink>Monthly meetings</MDBSideNavLink>
            </MDBSideNavCat>
            <MDBSideNavCat
              name='Contact me'
              id='contact-me'
              icon='envelope'
            >
              <MDBSideNavLink>FAQ</MDBSideNavLink>
              <MDBSideNavLink>Write a message</MDBSideNavLink>
            </MDBSideNavCat>
          </MDBSideNavNav>
        </MDBSideNav>

david1 pro commented 4 years ago

ok... did you just now add this to the api doc?

https://mdbootstrap.com/docs/react/navigation/sidenav/

:) thanks - I should have scrolled all the way to the bottom

Piotr Glejzer staff commented 4 years ago

No, I didn't. It was there before ;) Have a nice day!

Add comment

Write

Create snippet

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: Pro
Premium support: No
Technology: MDB React
MDB Version: 4.25.1
Device: Mac
Browser: Any
OS: Mac OS
Provided sample code: No
Provided link: No

david1

Pro User 141Support score
8Questions 13Answers 0Snippets