Products.cmfplone: New faster navigation with dropdown menus for Plone

[agitator]

Responsible Persons

Proposer: Peter Holzer (@agitator)

Seconder: Johannes Raggam (@thet)

Abstract

Plone sites typically have a lot of content, the global navigation only supports the main folders of the site for navigation. It's time we have dropdown menus in Plone by default.

Motivation

webcouturier.dropdownmenu is used by many plonistas to solve this problem - not without issues.

• It doesn't follow the mobile first paradigm, which was introduced with the plonetheme.barceloneta in Plone 5
• Performance issues: takes several second on a cold Plone instance to render because it uses multiple catalog queries to build the markup

Assumptions

• It's time we have dropdown menus in Plone by default

Proposal & Implementation

While I was in process of updating the styles for mobile first, Johannes found out about the performance issues while profiling a client site. We then decided to start a new implementation of a dropdown navigation for Plone.

The new implementation features:

• Mobile first styling
• Extends the existing navigation styles and ui switches from plonetheme.barceloneta
• Build-in efficient caching
• exclude_from_nav indexer
• Renders on the navigation root object and sets inPath and current CSS classes in JavaScript, which allows efficient caching.
• Replacement for the plone.global_sections viewlet
• plone.tiles based navigation
• Focus on speed of execution
• Configurable navigation start path
• Configurable navigation depth

Todo:

• Finish styling
• JSON data structure for client side rendering.
• Finish caching mechanism
• Extend existing Plone navigation controlpanel with options for navigation depth (start), caching
• Upgrade step

Deliverables

Existing code and proof of concept in https://github.com/collective/collective.navigation (still needs polishing)

Risks

• Existing customizations of the plone.global_sections viewlet have to be updated

Participants

• Peter Holzer - UI/UX, frontend, styling,...
• Johannes Raggam - Development, backend

https://github.com/plone/buildout.coredev/blob/5.2/plips/plip-2516-navigation.cfg

Tasks necessary for the plip:

• [x] add NavTreeProvider as contentprovider
  
  
  
  • [x] enhance NavTreeProvider with globalsections functionality
  
  
• [x] add BooleanIndex exclude_from_nav
• [x] add Upgrade step for index
• [x] add Navigationmarker pattern
• [x] add Styles for new navigation
• [x] Extend navigation controlpanel and use config in NavTreeProvider
• [x] Finish styling
  
  
  
  • [x] current items
  
  
  • [x] submenu marker
  
  
  • [x] keep current path open on mobile
  
  
• [x] Accessibility Markup (aria)
• [x] Caching (has no impact)
• [x] Tests
• [ ] Update documentation, changelogs, ...

Nice to have (could be finished later):

• Tile
• JSON

[agitator]

@plone/framework-team

[agitator]

Where should the code go?

• Viewlet & Tile into plone.app.layout or Products.CMFPlone?
• Styles plonetheme.barceloneta
• Javascript Products.CMFPlone (mockup)?

[hvelarde]

the tile must live out of core for obvious reasons.

[jensens]

@hvelarde no, it can be included with a zcml:condition. Thats fine .

[frapell]

@agitator I think viewlet & tile in p.a.layout, and JS in mockup, if it is a pattern

[iham]

"It's time we have dropdown menus in Plone by default"
i can sooo agree to that!

small, but nice typo:
"Finish cashing mechanism"
i guess it's about caching, not cashing ;)

[agitator]

fixed the cashing ;-)

[iham]

+1 for
viewlet in plone.app.layout -> sections.pt was there
js in mockup -> patterns/mockups live there
css in barceloneta. -> anything else is styled there.

i can't say anything about the tile, as i'm not really into the tile/mosaic topic

[agitator]

after discussion with @jensens I'll do the base navigation markup as a content provider and put the tile into plone.app.standardtiles

[polyester]

@agitator in following up to the chat we had earlier, some links that might help:

• css-only solution, using aria-haspopup and :focus-within
• do note that there's some concern on use of checkbox/input (see the "checkbox hack" section of this, although he says it can be a reasonable compromise, see also this codepen using his 'double span' trick). Still not 100% sure if you need the input element at all.

[yurj]

Please consider compatibility with other navigations like collective.editablemenu or megamenu

[agitator]

@yurj please explain, imho those add ons follow a totally different approach to build a navigation

From previous discussion, what I think a mega menu should be https://community.plone.org/t/site-map-and-mega-menu-generation-is-slow/4662/17?u=agitator

[ebrehault]

@agitator your PLIP has been approved by the Framework team.

[agitator]

😎 ... work will continue at the ploneconf sprint

[agitator]

@thet could you look into

• add portal_actions functionality

[thet]

@agitator I try to get this done this week.

[agitator]

@thet i also added navigation_depth
and some tests would be useful ;-)

[thet]

I'm incredibly busy currently and I hope for some unexpected productivity boosts to get anything done this week. So I don't make any promises.
Maybe this could be added to the sprint's topics.

[agitator]

@polyester you said something about additional attributes for the markup... which ones are these?

[agitator]

As far as I see the plip is ready to merge for the alpha. Functionalitywise everthing is there, further improvements will follow on feedback.

[agitator]

@svx @polyester is there documentation for the navigation somewhere to add this feature?

[polyester]

@agitator it depends on what the audience is for the documentation. I'm guessing here it would be for site administrators with perhaps a few hints for themers. In that case, I would put create a new rst file under https://github.com/plone/documentation/tree/5.1/adapt-and-extend/config

If there's considerable documentation for themers because it's very complicated to theme, it might warrant an own section under https://github.com/plone/documentation/tree/5.1/adapt-and-extend/theming, but if it's fairly minimal and basically just says "here's the classes, go write css if you want" it is probably easier to keep everything together.

Documentation for developers on how to actually extend/improve this dropdown-navigation should live apart from that; if this is not an own product (as I gather it's going into several other products), I would say it's easiest to create an rst file under https://github.com/plone/documentation/tree/5.1/develop/plone/functionality, that seems the most logical place

[agitator]

@polyester thanx for the pointers! I think extending the config docs should be enough.

[fredvd]

@agitator Is there a public Demo site running somewhere? If not I should build a local coredev 5.2 with this plip activated to try the new navigation?

[agitator]

@fredvd you can try with https://github.com/plone/buildout.coredev/blob/5.2/plips/plip-2516-navigation.cfg

[ale-rt]

This PLIP was completed reviewed and merged in the Alpine city sprint.
Thanks you all for the hard work!