create new tag
, view all tags

Feature Proposal: PatternSkin with Pulldown Menu Bar


TWiki uses a sidebar for navigation. This takes away screen real estate. I menubar like QuickMenuSkin offers a navigation that is quick and intuitive. This is a proposal to change the PatternSkin to remove the sidebar and the add a menu bar on top.

Description and Documentation

Sample (simulated) menu structure for Main web on twiki.org, with all pulldown menus shown in open state for illustration purposes:

TWiki logo Webs Close toggle, Twisty close toggle
Web background Blog
Web background Codev
Web background Main
Web background Plugins
Web background Sandbox
Web background Support
Web background TWiki
Web background Main web Close toggle, Twisty close toggle
Persons Users
Group Groups
Index Index
Search topic Search
Changes Changes
Notify Notifications
RSS feed, rounded corners RSS Feed
Statistics Statistics
Wrench, tools Preferences
Person Account Close toggle, Twisty close toggle
Personal links:
Personal link 1
Personal link 2
Personal link 3
UWEB (Universal Wiki Edit Button), blue, outline edit


*Option 1: *

Option 2:

I prefer option 2.

Top menu bar is 22 pixel tall, light gray icon bar is 50 pixel tall, for total of 72 pixel. Old PatternSkin is 65 pixel tall. However, if you count the breadcrumb and edit buttons, title in old PatternSkin starts at 148 pixel, with this new skin it starts at 129 pixel, e.g. a gain of 19 pixel.



-- Contributors: PeterThoeny - 2010-03-20


Idea: Combine menu bar and breadcrumb. Example for this topic, shown without pulldown:

Home Close toggle, Twisty close toggle
Codev web Close toggle, Twisty close toggle
PatternSkinWithPulldownMenuBar Close toggle, Twisty close toggle

May be not such a good idea, it takes away too much screen real estate.

-- PeterThoeny - 2010-03-21

Another idea: Show menu bar at the very top of the window, like the OS-X menu on top.

-- PeterThoeny - 2010-03-21

OK, may be we can combine menu bar and breadcrumb if done on top like on OS-X and with abbreviated parent webs (W > W > W) and parent topics (P > P > P) that have tooltip info with full name of web or topic. Simulated example of this topic with "Home" pulldown shown in expanded state, assuming there would be a parent web called "Community":

 TWiki logo Home menu-dropdown.gif menu-arrow-right.gif W menu-arrow-right.gif    Codev web menu-dropdown.gif menu-arrow-right.gif P menu-arrow-right.gif P menu-arrow-right.gif Topic menu-dropdown.gif Person Account menu-dropdown.gif
  Web background Blog web 
  Web background Codev web 
  Web background Main web 
  Web background Plugins web 
  Web background Sandbox web 
  Web background Support web 
  Web background TWiki web 

This has several advantages:

  • Saves screen real estate
  • Possible to remove current breadcrumb
  • Good for TWiki branding (small TWiki logo on upper left)
  • Extensible: An application or plugin might want to add its own pulldown menu
    • Example: Instant message plugin that shows a pulldown with list of who is online (like on FB)

  • right arrow as menu separator, 10x16:

  • dropdown triangle, 14x16:

  • Transparent background for colored web box in menu:

-- PeterThoeny - 2010-03-21

I added two screenshot mockups at the top.

-- PeterThoeny - 2010-03-21

Hi Peter - this is good idea. I support this proposal. Option two is better..reduction in header-bar/action buttons idea is good idea.

-- SopanShewale - 2010-03-23

I am changing state to under construction and accepted by 7 day feedback period.

-- PeterThoeny - 2010-03-30

I am implementing this is a skin named TopMenuSkin that overloads the PatternSkin. That way, the skin can be activated with a SKIN = topmenu,pattern setting. This reduces the amount of documentation changes needed for this release. At a later point we can merge the TopMenuSkin into the PatternSkin.

-- PeterThoeny - 2010-04-04

Thats Good idea Peter

-- SopanShewale - 2010-04-05

Version 1.1 is released, ready for TWiki 5.0

-- PeterThoeny - 2010-04-23

Edit | Attach | Watch | Print version | History: r13 < r12 < r11 < r10 < r9 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r13 - 2010-04-23 - PeterThoeny
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.