Skip to main content link. Accesskey S

Organizational Chart

An organizational chart is a special kind of tree component that shows the heirarchy of an organization.



  • lotusTree lotusOrgChart - these two classes go on the outermost ul tag of the nested lists.
  • lotusOrgChartTop - goes on the link tag inside the first li tag in the chart
  • lotusOrgChartBottom - goes on the last li tag in the list

Basic Implementation

Use a series of nested lists to create the org chart, using the classes as described above.


There are styles in place to support a div version of this component, but it is recommended to use the list version of the component, which is semantically correct.


Sample HTML

CSS (tree.css)

Theme CSS (treeTheme.css)

The org chart is the only version of the tree that has been prototyped as part of a design. There is a separate tree component, but we have no examples of it yet.

See Also:

IBM, the IBM logo, and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at