Question 278814 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to style active NavLink

How can I make the active NavLink look similar to this? Tried following the react router dom docs but it didn’t give this desired look. Is it possible to pass the isActive prop from the NavLink component to the Flex component. I created a minimum representation of the sidebar down below. I’d appreciate any help.

enter image description here

Here’s a minimal recreation of the sidebar made using Chakra UI:
https://codesandbox.io/s/sidebar-ckm26m?file=/src/index.js

//imports

const App = () => {
return (
 <Stack spacing={4}>
     <NavLink to="/overview">
      <Flex align="center" p="2" mx="2" ...>
        <Box p="4px" border="1px" ...>
          <AiOutlineDashboard size={16} />
        </Box>
        <Box ml={2} fontSize="sm">
          Overview
        </Box>
      </Flex>
     </NavLink>

     <NavLink to="/app">
      <Flex align="center" p="2" mx="2" ...>
       <Box p="4px" border="1px" ...>
        <IoApps size={16} />
       </Box>
       <Box ml={2} fontSize="sm">
        Apps
       </Box>
      </Flex>
     </NavLink>
    </Stack>

)
}

export default App
Tags:

2

Answers


  1. 0

    Use a CSS selector with with pseudo class of active, within the pseudo class you can change the BG color

    button:active {
    background-color: green; /* Change the background color to green when the button is active /
    border: 2px solid darkgreen; /     Add a border to the button when it’s active */
    }

    Login or Signup to reply.
  2. 0

    You need to apply different styles based on your current path, one way of achieving this is by using useLocation() which gives you the current path.

    Make sure you make an array of your items so you can map over them and apply the necessary changes when it’s the selected path.

    Now if I apply this concept to the code your provided on sandbox, my App.js should look like this

    import { Stack, Flex, Box } from "@chakra-ui/react";
import { NavLink } from "react-router-dom";
import { AiOutlineDashboard } from "react-icons/ai";
import { IoApps } from "react-icons/io5";
import { useLocation } from "react-router-dom";

const items = [
  {
    label: "Overview",
    path: "/overview",
    icon: <AiOutlineDashboard size={16} />
  },
  {
    label: "Apps",
    path: "/app",
    icon: <IoApps size={16} />
  }
];

const App = () => {
  const { pathname } = useLocation();
  return (
    <Box
      bg="white"
      borderRight="1px"
      w="200px"
      pos="fixed"
      overflow="auto"
      h="full"
    >
      <Stack spacing={4}>
        {items.map((item) => {
          const isSelected = item.path === pathname;
          return (
            <NavLink key={item.path} to={item.path}>
              <Flex
                align="center"
                p="2"
                mx="2"
                borderRadius="lg"
                role="group"
                fontSize="14px"
                cursor="pointer"
                background={isSelected && "#012D89"}
                color={isSelected && "#fff"}
                _hover={
                  !isSelected && {
                    bg: "#f5f5f5",
                    color: "#002c8a",
                    borderColor: "#002c8a"
                  }
                }
              >
                <Box
                  p="4px"
                  border="1px"
                  borderRadius="full"
                  borderColor="gray.200"
                  fontSize="26"
                >
                  {item.icon}
                </Box>
                <Box ml={2} fontSize="sm">
                  {item.label}
                </Box>
              </Flex>
            </NavLink>
          );
        })}
        ;
      </Stack>
    </Box>
  );
};

export default App;

    And it looks like that

    screenshot of solution

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search