Conditional rendering of navigation items.

Matt SonesMatt Sones πŸ’ŽπŸ’ŽπŸ’Ž
edited June 25, 2020 in Ideas
Would be super-helpful!
10 votes

Implemented Β· Last Updated


  • Rob HatchRob Hatch πŸ’ŽπŸ’ŽπŸ’Ž
    edited September 1, 2016
    Yup. Β I can see that.Β 
  • Matt SonesMatt Sones πŸ’ŽπŸ’ŽπŸ’Ž
    edited February 10, 2017
    I know you probably hate this question...

    any idea when Planned might become Implemented?
  • Barry SchnellBarry Schnell πŸ’ŽπŸ’Ž
    edited February 25, 2017
    Looks like Matt beat me to the punch on this one - Conditional Rendering of menu items would eliminate a lot of custom code that we currently have written to manage our menu system. Β 

    Please please please :) Β and thank you!
  • edited June 25, 2020
    Yeah, this is a no-brainer. Working on it!
  • Barry SchnellBarry Schnell πŸ’ŽπŸ’Ž
    edited November 18, 2016
    Awesome news, thanks Ben!
  • Pat VachonPat Vachon πŸ’ŽπŸ’ŽπŸ’Ž
    edited June 25, 2020
    Yup. As Ben says, "no-brainer".
  • Pat VachonPat Vachon πŸ’ŽπŸ’ŽπŸ’Ž
    edited January 5, 2016
    Working on it to be part of a patch?
  • edited October 7, 2015
    Bugs are first priority, then it's on to these things!
  • edited April 11, 2017
    This looks implemented but I see empty spaces where those items "would be".Β  I have different rep types and render a group of Nav Items for 1 and a different one for the other. The nav bar breaks up or has empty spaces when logged in as someone with sections not meeting render criteria.
  • edited January 29, 2016


    That shows all of the blank spaces and a Nav item going to another row when there's plenty of room to slide into the first row.
  • Emily DavisEmily Davis ✭✭✭✭
    edited December 21, 2016
    Joe, I just submitted this to our dev team. So, yes, Acknowledged. Thanks for the bug report!
  • DaveDave πŸ’Ž
    edited December 14, 2016
    Hello, Would there be any ETA for this bug to be fixed?

    I'm wondering , as right now it's affecting us as well, and would like not to have to create a Different navigation menu for each role...

  • Rob HatchRob Hatch πŸ’ŽπŸ’ŽπŸ’Ž
    edited September 1, 2016
    Sorry this is still outstanding. Β The conditional rendering works, Β but there is evidence of the hidden piece remaining behind that looks weird..Β 
  • edited April 29, 2016
    Hey Rob ... did this bug fix get a guernsey for Rockaway?
  • Matt SonesMatt Sones πŸ’ŽπŸ’ŽπŸ’Ž
    edited May 23, 2018
    This reply was created from a merged topic originally titled unrendered nav component items cause wrapping/css problems. I thought I saw another thread about this a while ago, but I couldn't find it again. Sorry if this is a repeat.

    This seems like a pretty simple fix, guys. Right?

  • Amy DewaalAmy Dewaal ✭✭
    edited December 16, 2016

    Thanks for pointing this out. Our devs are aware of this and we'll let you know when this is fixed in a future release.

  • Matt SonesMatt Sones πŸ’ŽπŸ’ŽπŸ’Ž
    edited September 12, 2019
    Hey friends, since Skuid is taking it's time to get a fix out for the conditional rendering bug, you can use this inline script:
    (function(skuid){     var $ = skuid.$;
    $(document.body).one('pageload',function(){ $('#MyNavComponentId').children(':empty').remove(); }); })(skuid);
    Β Just be sure to change MyNavComponentId to the unique id of your nav component. Alternatively, you could use something like
    Β $('.sk-navigation').children(':empty').remove(); 
    to handle all navigation components instead of a specific one.
  • Craig RosenbaumCraig Rosenbaum ✭✭✭✭
    edited August 30, 2016
    Thanks Matt! I just wrote something for this yesterday, although mine was much less efficient. I used an $.each loop and 'this.getAttribute("data-rendered") == "false"'.
  • Barry SchnellBarry Schnell πŸ’ŽπŸ’Ž
    edited September 12, 2019
    Matt/Craig - In general, removing DOM elements that Skuid adds could lead to undesired behavior in some situations. In this case, you should be OK since it's a DOM element inside of the component itself. With that said, rather than use Javascript for this, you should be able to accomplish the workaround with pure CSS. Try one of the following: 1) To hide all empty DIVs with any navigation component .sk-navigation div:empty { display:none; } 2) To hide all empty DIVs within a specific navigation component (Specify a unique Id on your Nav component - in this case its called myNav) #myNav div:empty { display: none; }
  • Craig RosenbaumCraig Rosenbaum ✭✭✭✭
    edited August 30, 2016
    Thanks for the information Barry. My JS snippet actually added a CSS class that has display:none in it. A much less eloquent solution than yours - but it did the job :)
  • Karen WaldschmittKaren Waldschmitt πŸ› οΈ ο»Ώ
    edited December 21, 2016
    Thanks for sharing this workaround Matt!Β 

  • Mark DeSimoneMark DeSimone πŸ› οΈ ο»Ώ
    edited February 4, 2020
    This issue has been incorporated into Rockaway Iteration 13Β and is now available from the Skuid Releases page at As a reminder, Salesforce does not allow reverting back to prior versions of managed packages. Skuid always recommends installing new versions in a non-business critical sandbox environment to test all mission critical functionality before installing into a production environment.

    Thank youΒ for your patience while we worked to implement this.Β 

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!