Expose header navigation open/close state (with setter) #52

Activity

1. Tomdango commented on Dec 3, 2020

   

   Tomdango

   on Dec 3, 2020

   Collaborator

   More actions

   Sorry for the slow response to this! There isn't currently a prop that allows you to manipulate the menuOpen state, apart from using the toggleMenu function from the context, though the context is designed to be internal rather than to be manipulated externally.

   Would it be useful to have a menuOpen prop passed to the base Header element? This would be the "forced" value of opening the menu, and will get passed down to all of the children in the internal context.

   Let me know what you think!
2. Tomdango

   added

   enhancementNew feature or requestNew feature or request

   on Dec 3, 2020
3. charlesomer commented on Dec 4, 2020

   

   charlesomer

   on Dec 4, 2020

   Author

   More actions

   Hmm I'm not sure, I guess it would then be possible to check for route changes where the Header component is used in an application and manipulate menuOpen that way? I'm just trying to think of the best way to do this as it would be best (I think) if the menu collapsed if a link is clicked outside of the header too. For example, if a user opens the menu and then clicks on a link on the page they are currently on (not the menu links), the menu should then disappear. Does that make sense and would that be possible using the way suggested above? Thank you for your help! 😄
4. Tomdango commented on Dec 7, 2020

   

   Tomdango

   on Dec 7, 2020

   Collaborator

   More actions

   It should be - the best way I would do it is to have some context up at the root level of your app that holds the menuOpen state, with a couple of setter methods to change that value. Then you could combine that with an event listener that looks for changes in the pathname so that you can automatically set that value when you navigate, which might be easier than adding it onto every link! Or you could even write a little custom hook that closes the menu when the view is unmounted, something like:

   const useCloseMenu = () => {
       const { closeNav } = useContext(RootLevelContext);
       useEffect(() => () => closeNav(), []);
   }

   Returning another function from the useEffect callback, with an empty dependency array works the same in practice as the componentWillUnmount function.
5. colinrotherham commented on Sep 29, 2025

   

   colinrotherham

   on Sep 29, 2025

   Collaborator

   More actions

   This is closed by #267

   The context helper toggleMenu was replaced by setMenuOpen alongside a new open prop:

   - <Header.Navigation>
   + <Header.Navigation open>
       <Header.NavigationItem href="#">Example 1</Header.NavigationItem>
       <Header.NavigationItem href="#">Example 2</Header.NavigationItem>
       <Header.NavigationItem href="#">Example 3</Header.NavigationItem>
       <Header.NavigationItem href="#">Example 4</Header.NavigationItem>
     </Header.Navigation>

   Bear in mind that NHS.UK frontend handles the open/close toggle behaviour, e.g. it will automatically close when the viewport width increases and menu items no longer need to overflow

   But if this happens the menuOpen context will still be updated
6. colinrotherham

   closed this as completedon Sep 30, 2025
7. colinrotherham

   added this to the v6.0.0 milestone on Oct 1, 2025
8. colinrotherham

   changed the title [-]Access/set toggleMenu.[/-] [+]Expose header navigation open/close state (with setter)[/+] on Oct 7, 2025