New faster navigation with dropdown menus for Plone #2516

agitator · 2018-09-14T15:40:24Z

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:

Nice to have (could be finished later):

Tile
JSON

agitator · 2018-09-14T15:49:52Z

@plone/framework-team

agitator · 2018-09-14T15:59:14Z

Where should the code go?

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

hvelarde · 2018-09-14T16:32:42Z

the tile must live out of core for obvious reasons.

jensens · 2018-09-14T16:35:58Z

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

frapell · 2018-09-14T16:55:33Z

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

iham · 2018-09-18T09:01:41Z

"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 · 2018-09-18T09:06:48Z

fixed the cashing ;-)

iham · 2018-09-18T11:50:04Z

+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 · 2018-09-18T12:46:40Z

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

polyester · 2018-10-04T10:18:15Z

@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 · 2018-10-10T07:16:07Z

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

agitator · 2018-10-10T07:28:25Z

@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 · 2018-10-23T13:07:52Z

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

agitator · 2018-10-23T13:52:02Z

😎 ... work will continue at the ploneconf sprint

agitator · 2018-11-07T07:51:15Z

@thet could you look into

add portal_actions functionality

thet · 2018-11-07T08:40:53Z

@agitator I try to get this done this week.

agitator · 2018-11-07T17:19:00Z

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

thet · 2018-11-07T19:29:39Z

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 · 2019-01-15T10:18:12Z

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

polyester · 2019-01-15T11:59:57Z

@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 · 2019-01-15T14:27:49Z

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

fredvd · 2019-01-30T21:45:31Z

@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 · 2019-01-31T07:11:20Z

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

ale-rt · 2019-02-06T10:23:19Z

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

Refs. plone/Products.CMFPlone#2516

Branch: refs/heads/master Date: 2019-02-06T20:23:16+01:00 Author: ale-rt (ale-rt) <[email protected]> Commit: plone/plone.app.layout@b13a0fd Remove a property that was defined but not used Refs. plone/Products.CMFPlone#2516 Files changed: M plone/app/layout/navigation/navtree.py Repository: plone.app.layout Branch: refs/heads/master Date: 2019-02-07T12:15:03+01:00 Author: Gil Forcada Codinachs (gforcada) <[email protected]> Commit: plone/plone.app.layout@64dc4e8 Merge pull request #178 from plone/2516-fixup Remove a property that was defined but not used Files changed: M plone/app/layout/navigation/navtree.py

Refs. #2516

Refs. plone/Products.CMFPlone#2516

Branch: refs/heads/master Date: 2019-02-09T16:11:46+01:00 Author: ale-rt (ale-rt) <[email protected]> Commit: plone/plone.app.layout@bcc4fb5 Improve the new navigation and add test coverage Refs. plone/Products.CMFPlone#2516 Files changed: A news/181.fixed A plone/app/layout/navigation/tests/test_navtree_provider.py M plone/app/layout/navigation/navtree.py M plone/app/layout/testing.py Repository: plone.app.layout Branch: refs/heads/master Date: 2019-02-18T18:28:28+01:00 Author: ale-rt (ale-rt) <[email protected]> Commit: plone/plone.app.layout@544b37b Merge remote-tracking branch 'origin/master' into 2516-fixup Files changed: M CHANGES.rst M setup.py D news/176.bugfix D news/180.bugfix D news/2516.feature Repository: plone.app.layout Branch: refs/heads/master Date: 2019-02-18T18:52:12+01:00 Author: ale-rt (ale-rt) <[email protected]> Commit: plone/plone.app.layout@ea2cacc Old tab could also have a name Files changed: M plone/app/layout/navigation/navtree.py Repository: plone.app.layout Branch: refs/heads/master Date: 2019-02-18T23:53:10+01:00 Author: ale-rt (ale-rt) <[email protected]> Commit: plone/plone.app.layout@c95e85e Update and expand tests Files changed: M plone/app/layout/viewlets/tests/test_common.py Repository: plone.app.layout Branch: refs/heads/master Date: 2019-02-19T09:32:10+01:00 Author: Jens W. Klein (jensens) <[email protected]> Commit: plone/plone.app.layout@a1993c9 Merge pull request #182 from plone/2516-fixup Improve the new navigation and add test coverage Files changed: A news/181.fixed A plone/app/layout/navigation/tests/test_navtree_provider.py M plone/app/layout/navigation/navtree.py M plone/app/layout/testing.py M plone/app/layout/viewlets/tests/test_common.py

Remove the ``plone.navtree`` content provider that was introduced in the context of the Navigation PLIP (plone/Products.CMFPlone#2516) Fixes #188

Remove the ``plone.navtree`` content provider that was introduced in the context of the Navigation PLIP (plone/Products.CMFPlone#2516) The logic has been moved to the viewlet that was invoking it. Fixes #188

Refs. #2516

agitator added the 03 type: feature (plip) label Sep 14, 2018

pbauer added this to the Plone 5.2 milestone Sep 14, 2018

iham self-assigned this Sep 18, 2018

agitator self-assigned this Oct 1, 2018

iham removed their assignment Oct 1, 2018

jensens added the 22 status: in-progress label Oct 9, 2018

agitator mentioned this issue Nov 10, 2018

Plip 2516 navigation plone/plone.app.layout#172

Merged

ale-rt closed this as completed Feb 6, 2019

ale-rt added a commit to plone/plone.app.layout that referenced this issue Feb 6, 2019

Remove a property that was defined but not used

b13a0fd

Refs. plone/Products.CMFPlone#2516

ale-rt mentioned this issue Feb 6, 2019

Remove a property that was defined but not used plone/plone.app.layout#178

Merged

pbauer mentioned this issue Feb 6, 2019

New navigation in Plone 5.2 does not respect types_use_view_action_in_listings #2730

Closed

ale-rt added a commit that referenced this issue Feb 9, 2019

Fix excluded items in navigation

f2794f9

Refs. #2516

ale-rt mentioned this issue Feb 9, 2019

The new navigation lacks test coverage and some navigation settings are not respected plone/plone.app.layout#181

Closed

ale-rt added a commit to plone/plone.app.layout that referenced this issue Feb 9, 2019

Improve the new navigation and add test coverage

bcc4fb5

Refs. plone/Products.CMFPlone#2516

This was referenced Feb 9, 2019

Fix excluded items in navigation #2743

Merged

Improve the new navigation and add test coverage plone/plone.app.layout#182

Merged

pbauer removed the 32 needs: review label Feb 23, 2019

ale-rt mentioned this issue Mar 4, 2019

Fix content provider abuse plone/plone.app.layout#188

Closed

ale-rt added a commit to plone/plone.app.layout that referenced this issue Mar 4, 2019

Remove the plone.navtree content provider

06d13ca

Remove the ``plone.navtree`` content provider that was introduced in the context of the Navigation PLIP (plone/Products.CMFPlone#2516) Fixes #188

ale-rt mentioned this issue Mar 4, 2019

Remove the plone.navtree content provider plone/plone.app.layout#189

Merged

thet mentioned this issue Feb 7, 2020

Performance issue with GlobalSection viewlet #3035

Closed

jensens pushed a commit that referenced this issue Nov 12, 2021

Remove unnecessary line

0c90d14

Refs. #2516

stevepiercy added this to PLIPs (core) Jun 27, 2024

stevepiercy moved this to Merged in PLIPs (core) Jun 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New faster navigation with dropdown menus for Plone #2516

New faster navigation with dropdown menus for Plone #2516

agitator commented Sep 14, 2018 •

edited

Loading

agitator commented Sep 14, 2018

agitator commented Sep 14, 2018

hvelarde commented Sep 14, 2018

jensens commented Sep 14, 2018

frapell commented Sep 14, 2018

iham commented Sep 18, 2018

agitator commented Sep 18, 2018

iham commented Sep 18, 2018

agitator commented Sep 18, 2018

polyester commented Oct 4, 2018

yurj commented Oct 10, 2018

agitator commented Oct 10, 2018 •

edited

Loading

ebrehault commented Oct 23, 2018

agitator commented Oct 23, 2018

agitator commented Nov 7, 2018 •

edited

Loading

thet commented Nov 7, 2018

agitator commented Nov 7, 2018

thet commented Nov 7, 2018

agitator commented Jan 15, 2019

polyester commented Jan 15, 2019

agitator commented Jan 15, 2019

fredvd commented Jan 30, 2019

agitator commented Jan 31, 2019

ale-rt commented Feb 6, 2019

New faster navigation with dropdown menus for Plone #2516

New faster navigation with dropdown menus for Plone #2516

Comments

agitator commented Sep 14, 2018 • edited Loading

Responsible Persons

Proposer: Peter Holzer (@agitator)

Seconder: Johannes Raggam (@thet)

Abstract

Motivation

Assumptions

Proposal & Implementation

The new implementation features:

Todo:

Deliverables

Risks

Participants

Tasks necessary for the plip:

Nice to have (could be finished later):

agitator commented Sep 14, 2018

agitator commented Sep 14, 2018

hvelarde commented Sep 14, 2018

jensens commented Sep 14, 2018

frapell commented Sep 14, 2018

iham commented Sep 18, 2018

agitator commented Sep 18, 2018

iham commented Sep 18, 2018

agitator commented Sep 18, 2018

polyester commented Oct 4, 2018

yurj commented Oct 10, 2018

agitator commented Oct 10, 2018 • edited Loading

ebrehault commented Oct 23, 2018

agitator commented Oct 23, 2018

agitator commented Nov 7, 2018 • edited Loading

thet commented Nov 7, 2018

agitator commented Nov 7, 2018

thet commented Nov 7, 2018

agitator commented Jan 15, 2019

polyester commented Jan 15, 2019

agitator commented Jan 15, 2019

fredvd commented Jan 30, 2019

agitator commented Jan 31, 2019

ale-rt commented Feb 6, 2019

agitator commented Sep 14, 2018 •

edited

Loading

agitator commented Oct 10, 2018 •

edited

Loading

agitator commented Nov 7, 2018 •

edited

Loading