Skip to end of metadata
Go to start of metadata

I was hoping to to find macros that might enable me to build a dynamic navigation bar based on content structure, with horizontal menu items being the top-level pages in the current space, and the drop-downs populated with their respective children.

Are there any macros or combinations of macros that could be used to achieve this?

  • No labels

8 Comments

  1. Unknown User (dan.willis@gmail.com)

    So to give a bit more detail of what I'm trying to do...

    I have two rows of navigation; the top row lists all the spaces like this:

    $helper.renderConfluenceMacro("{report-list}
    {space-reporter:space=@all}
    {text-sort:space:title}
    {space-reporter}
    {report-body}{report-info:space:title|link=true}{report-body}
    {report-list}")
    

    ...which works fine, except for the fact that I'd like to be able to highlight the current nave using CSS, i.e. the current space would need to have a particular class attribute appended.

    The second row is a dynamic list of the top-level pages of the current class. I'm currently generating this as follows:

    $helper.renderConfluenceMacro("{children:page=/}")
    

    ...but this is not sufficient in that I would also like there to be a drop down of sub pages for each of these top-level pages. I can handle the behavior and presentation with JS and CSS, so really only require a nested list as follows:

    • Top-level page One
      o Sub-page One
      o Sub-page Two
      o Sub-page ...
      o Sub-page n
    • Top-level page Two
      o Sub-page One
      o Sub-page Two
      o Sub-page ...
      o Sub-page n
    • Top-level page Three
    • Top-level page ...
    • Top-level page n

    I hope this is clear.

    I'd like to be able to do what the pagetree macro does, but only with the first and second levels, producing just a simple nested unordered list, and as with the first level, a class denoting the current/selected page.

    Cheers,

    Dan.

  2. Unknown User (dan.willis@gmail.com)

    Hmm... I was hoping Guy might have been able to help me out here, but it's rather quiet (smile)

  3. Unknown User (catherinej)

    I'm in the same situation...

    We have a need to have tabs along the top of our website, like the new adaptavist website does. Its easy enough to create tabs alone as I can do that with CSS - but what needs to be written from a macro point of view to know which tab should be the current/active tab?

    Eg if you have 5 spaces, such as:
    Space 1
    Space 2
    Space 3
    Space 4
    Space 5

    If you were currently viewing a page that is a child of space 3, how do you get your top navigation to reflect that by activating the tab called Space 3?

    1. I suspect that once the updates are complete Guy will be creating a tutorial detailing how we went about building up our layout structure which has been achieved through use of a new feature added to 3.3.4 & 3.4.0 called 'flags'.

      In short a flag is set to define a particular piece of information about the current situation, eg:

      {set-flag:user-anonymous}
      
      {builder-show:flag=user-anonymous|group=confluence-users}
        {set-flag:user-registered} Registered user
        {set-flag:user-anonymous|state=false}
      {builder-show}
      
      {builder-show:flag=user-registered|group=adaptavist,adaptavist-staff,adaptavist-probation}
        {set-flag:user-adaptavist} Adaptavist staff
      {builder-show}
      
      .
      .
      .
      
      {builder-hide:flag=user-anonymous}
        {builder-show2:flag=zone-space,zone-custom,zone-website|context=page,blogpost|mode=view}
          {set-flag:show-reply-link}
          {set-flag:show-edit-link}
          {builder-show:flag=zone-website,section-home,section-about,section-support,section-shop}
            {set-flag:show-reply-link|state=false}
            {set-flag:show-edit-link|state=false}
          {builder-show}
          {builder-show:flag=show-edit-link|title=Documentation,Forum,Wiki,Projects}
            {set-flag:show-reply-link|state=false}
            {set-flag:show-edit-link|state=false}
          {builder-show}
          {builder-show:flag=user-adaptavist}
            {set-flag:show-edit-link}
          {builder-show}
        {builder-show2}
      {builder-hide}
      

      There is a whole page's worth of this code that is defined in the flag logic page which is {import}ed into the layout and then acted upon either by swtiching layout or by altering the content of the current layout.

  4. Unknown User (gfraser)

    1. Unknown User (catherinej)

      Thanks Guy,
      So in the example you gave, if a user was viewing the page "Global Navigation" (which is a child of Navigation), how would you make "Navigation" be highlighted? Reason being so users know what part of the site they are currently viewing (as a double up to the breadcrumbs).

      No different to this page we are currently viewing, Products bar is highlighted and Forum tab is also.

      I'm just wanting to know how to go about creating tabs like that. Would it be possible to provide the macro code and CSS utilized for it? I know CSS quite well but I'm new to the themebuilder and still trying learn my way round the macros.

      1. I'm not quite sure what you are want to achieve, but would a {pagetree2} macro work for you?

        Unable to render content due to system error: java.lang.ClassCastException: com.adaptavist.confluence.theme.engine.macros.deprecated.Pagetree2Macro cannot be cast to com.atlassian.renderer.v2.macro.Macro

        Bah, it is still having difficulty locating the current page when rendered from the perspective of a comment ... I'll look into that (wink)

      2. Unknown User (gfraser)

        Using the children macro, or indeed most other macros, it's not possible because there are no additional classes added to the HTML to indicate which is the active location and thus allow styling.

        On our site, we've hard-coded the tabs and links bar items and given each link that's shown a class (eg. "zone-products" on the products tab and "section-forum" on the forum link).

        Using the new flag logic feature, we've used the builder-show/hide macros to set flags depending on the current "zone" and "section" of the site, a simplified example:

        {builder-show:space=Products,Builder,Bubbles,etc...}
          {set-flag:zone-products}
        {builder-show}
        
        {builder-show:flag=zone-products|title=Forum|recurse=true}
          {set-flag:section-forum}
        {builder-show}
        

        When a flag is set, a class gets added to the HTML body tag (eg. "flag-zone-products" and "flag-section-forum" in the case of this page) so we can then use some CSS to highlight the zone tab and section link:

        .flag-zone-products .zone-products {
          /* css to highlight the tab goes here */
        }
        .flag-section-forum .section-forum {
          /* css to highlight the forum link goes here */
        }
        

        As you can imagine, the CSS gets a little bloaty however for high volume sites it's far faster for the browser to handle slightly bloaty CSS than it is for the server to handle extensively bloaty wiki markup (the old approach). There isn't really any other way to do it at present (well, there is the old bloaty wiki markup method but we avoid that due to performance issues).

        One of the problems with Confluence is that it's content is extremely dynamic and there are many ways of viewing a page (eg. page info, page attachments, old versions, etc). We've not yet found a simple and performant method of dealing with this particular issue.

        While the approach we've taken on our site is hard-coded (setting the flags, css, etc) it's working well so far as almost all our spaces have the same sorts of sections. For something more dynamic, you'd need to develop a java macro that outputs an unordered list of links (a bit like the output of the children macro) but somehow add a class to the links that relate to the current location in the site. Sounds easy, but the more you dig in to it the more problematic it gets - especially on high volume sites where performance is a critical factor.

        As Alain mentions, the only other feasible approach is to use the pagetree2 macro, however that's not suitable for use with menus (a situation we hope to resolve in a future release of Builder).