Highlight the selected item of a navigation pane

Question

Referring to the example "Nav with nested links" under https://developer.microsoft.com/en-us/fabric#/controls/web/nav , On click of a nav item, I want to highlight this item. I have set url as ' ' so that clicking on an item doesn't do anything. But, I want that item to be highlighted on click. How do I do this? Any pointers would be helpful.

import * as React from 'react';
import { Nav,INavStyles } from 'office-ui-fabric-react/lib/Nav';
import { initializeIcons } from '@uifabric/icons';
initializeIcons();

    const navStyles: INavStyles = {
  root:{
      boxSizing: 'border-box',
      border: '1px solid lightgrey',
      overflowY: 'auto',
      height: 300
  },
  chevronButton: {
      height: 30
  },
  chevronIcon:{
      height: 30,
      lineHeight: 30
  },
  compositeLink: {}, 
  group:{}, 
  groupContent: {},
  link: {},
  linkText:{},
  navItem:{}, 
  navItems:{
    margin: 0
  },
};

export const NavNestedExample1: React.FunctionComponent = () => {
  return (
    <Nav
      styles={navStyles}
      ariaLabel="Nav example with nested links"
      groups={[
        {
          links: [
            {
              name: 'Parent link 1',
              url: '',
              target: '_blank',
              expandAriaLabel: 'Expand Parent link 1',
              collapseAriaLabel: 'Collapse Parent link 1',
              links: [
                {
                  name: 'Child link 1',
                  url: '',
                  target: '_blank'
                },
                {
                  name: 'Child link 2',
                  url: '',
                  target: '_blank',
                  expandAriaLabel: 'Expand Child link 2',
                  collapseAriaLabel: 'Collapse Child link 2',
                  links: [
                    {
                      name: '3rd level link 1',
                      url: '',
                      target: '_blank'
                    },
                    {
                      name: '3rd level link 2',
                      url: '',
                      target: '_blank'
                    }
                  ]
                },
                {
                  name: 'Child link 3',
                  url: '',
                  target: '_blank'
                }
              ]
            },
            {
              name: 'Parent link 2',
              url: '',
              target: '_blank',
              expandAriaLabel: 'Expand Parent link 2',
              collapseAriaLabel: 'Collapse Parent link 2',
              links: [
                {
                  name: 'Child link 4',
                  url: '',
                  target: '_blank'
                }
              ]
            }
          ]
        }
      ]}
    />
  );
};

I have never worked with this library but on clicking an item it probably triggers an event, according to [doc](https://learn.microsoft.com/en-us/javascript/api/office-ui-fabric-react/inavprops?view=office-ui-fabric-react-latest#selectedkey) you should keep the selectedKey in the state — Amir-Mousavi, Jan 22 '20 at 13:07

Alex · Accepted Answer · 2020-01-23T11:37:19.730

5

Use className props to apply an additional CSS class to the Nav,INavProps interface

export const App: React.FunctionComponent = () => {
  return (
    <Nav
      className='nav' //here
      ariaLabel="Nav example with nested links"
      groups={[
            ....

 //App.css
    .nav :focus{ 
      color: brown;
      background-color: darksalmon ;
    }
   .nav :hover{ 
      color: .....;
      background-color: ......;
    }
   .nav :active{ 
      color: .....;
      background-color: ......;
    }

With INavStyles and selectors

const navStyles: INavStyles = {
  root: {
    boxSizing: 'border-box',
    border: '1px solid lightgrey',
    overflowY: 'auto',
    height: 300
  },
  linkText: {
    color: 'green',
    selectors: { '&:hover': { color: 'red' } }
  },
compositeLink: {
   selectors: {
      '&:active ,&:focus-within': { backgroundColor: 'orange' }
    }
  },
...

edited Jan 23 '20 at 11:37

answered Jan 22 '20 at 15:01

Alex

3,941
1
17
24

This does solve it. But, I was looking more from using the 'styles' attribute of type INavStyles. My Nav component has "styles" already defined and I want to handle this highlighting in the "styles" itself rather than adding "className" attribute as well. Thanks for your inputs Alex. – Putta Jan 22 '20 at 16:06
I have edited the code and now use the "styles" property of "Nav" component. – Putta Jan 23 '20 at 04:37
this just changes text color from green to red on hover over the nav item. What I am looking for is... when I click on an item say "Child link1", this item should stay highlighted (basically change the background color). Currently, when you hover over an item, we can see change in background color for each item. I want to highlight the currently clicked item. – Putta Jan 23 '20 at 05:36
`What I am looking for is... when I click on an item say "Child link1"` it's different from your question, that why I asked to create a new one. for highlight the currently clicked item you can use `compositeLink` as I have shown in the updated one.also, you can try with others like `link`,`linkText`, `navItem`,...to achieve different styles. good luck. – Alex Jan 23 '20 at 11:43
Thanks Alex. Will try. – Putta Jan 23 '20 at 13:11

Highlight the selected item of a navigation pane

1 Answers1