Navigation
Elgg provides several types of navigation views. Themes may style some or all of these elements depending on how different the theme is from Elgg's default theme.
Breadcrumbs
The breadcrumb view is used by plugins to indicate location in a page hierarchy. It works as a stack and plugin authors can add elements to the breadcrumbs by using elgg_push_breadcrumb()
.
View: navigation/breadcrumbs
Pagination
This view provides paged navigation of content listings (blogs, files, search results). It is included automatically on the listing pages created with the elgg_list*
functions.
View: navigation/pagination
Menus
Elgg has more than 10 different menus that it natively supports (plugins can create additional menus). The menus all use an unordered list for HTML structure. The CSS classes are based on the menu name. Menus have a base CSS class, .elgg-menu
, which is extended based on the menu name. For example, the CSS class for the site menu is .elgg-menu-site
. Each section of a menu has its own class just as each individual menu item has a class. Finally, there are classes for hierarchical menus (.elgg-menu-parent
and .elgg-menu-child
). These classes make it easy to style and animate the menus without changing the HTML markup.
For information on adding or removing menu items, read the documentation included, engine/lib/naviga
tion.php
and the series of blog posts on the menu system published at http://blog.elgg.org/pg/search/?q=menu&search_type=tags.
Topbar menu
This menu has two sections ("default
" and "alt
").
View: navigation/menu/default
(used by most menus)
Site menu
This menu is available on every page. To limit the width of the menu, Elgg registers a function, elgg_site_menu_setup()
, to process its menu items before the menu is rendered. This function creates a "default
" section and a "more
" section as seen in the following screenshot:
View:
navigation/menu/site
Developers: To move this menu, remove it from the header by overriding that view and then insert it in a different location.
Page menu
The page menu appears in the sidebar in the default theme. It has different menu items in different parts of the site because it uses context to determine what to display. The primary context of a web page is generally the first segment in its URL (http://elgg.org/blog/all has a context of "blog
").
View:
navigation/menu/page
Footer menu
This menu is very similar to the topbar menu in that it uses the default menu view and has two sections ("default
" and "alt
").
View:
navigation/menu/default
User hover menu
This is a dynamic menu. This means that its menu items are not registered until just before it is rendered. It has an "actions
" section and an "admin
" section.
View:
navigation/menu/user_hover
Comments: Do not use elgg_re
gister_menu_item()
to add an item to this menu. Instead, use the 'register', 'menu:user_hover' plugin hook.
Entity menu
The entity menu is used frequently when displaying lists of content, users, or groups. It gets its name from the fact that all of these are "entities
" in Elgg's data model. It is also a dynamic menu.
View: navigation/menu/default
Developers: Use the 'register'
,
'menu:entity'
plugin hook to add an item to this menu.
Tabs
Tabbed navigation is commonly used for selecting whose content to view. It is included on the main listing pages for the content plugins such as blogs or bookmarks.
View: navigation/tabs
Developers: This view does not handle the content of the tab panes, but only the navigation. Any plugin using it must manage the tab switching (through Ajax, hidden content or new page loads).
Themers: The tabs use an unordered list. The selected item uses the class .elgg-state-selected
.