CSS Components / Arrows

Arrows

This component has been deprecated

See the arrowStyles function in Garden's @zendeskgarden/react-theming package for the latest updates.

Component classes for adding arrows to other elements (typically used in conjunction with with the menu and tooltip components). Arrows consist of the base .c-arrow class in addition to a positioning modifier class.

.c-arrow--bl
Positions arrow at the bottom left of the parent element
.c-arrow--b
Positions arrow at the center bottom of the parent element
.c-arrow--br
Positions arrow at the bottom right of the parent element
.c-arrow--lt
Positions arrow at the top on the left side of the parent element
.c-arrow--l
Positions arrow vertically centered on the left side of the parent element
.c-arrow--lb
Positions arrow at the bottom on the left side of the parent element
.c-arrow--rt
Positions arrow at the top on the right side of the parent element
.c-arrow--r
Positions arrow vertically centered on the right side of the parent element
.c-arrow--rb
Positions arrow at the bottom on the right side of the parent element
.c-arrow--tl
Positions arrow at the top left of the parent element
.c-arrow--t
Positions arrow at the center top of the parent element
.c-arrow--tr
Positions arrow at the top right of the parent element

Examples

USING CSS-MENUS

Component classes for adding arrows to other elements (typically used in conjunction with with the menu and tooltip components). Arrows consist of the base .c-arrow class in addition to a positioning modifier class.

BOTTOM LEFT

.c-arrow.c-arrow--bl
  • Item 1
  • Item 2
  • Item 3

BOTTOM

.c-arrow.c-arrow--b
  • Item 1
  • Item 2
  • Item 3

BOTTOM RIGHT

.c-arrow.c-arrow--br
  • Item 1
  • Item 2
  • Item 3

LEFT TOP

.c-arrow.c-arrow--lt
  • Item 1
  • Item 2
  • Item 3

RIGHT TOP

.c-arrow.c-arrow--rt
  • Item 1
  • Item 2
  • Item 3

CENTER LEFT

.c-arrow.c-arrow--l
  • Item 1
  • Item 2
  • Item 3

CENTER RIGHT

.c-arrow.c-arrow--r
  • Item 1
  • Item 2
  • Item 3

LEFT BOTTOM

.c-arrow.c-arrow--lb
  • Item 1
  • Item 2
  • Item 3

RIGHT BOTTOM

.c-arrow.c-arrow--rb
  • Item 1
  • Item 2
  • Item 3

TOP LEFT

.c-arrow.c-arrow--tl
  • Item 1
  • Item 2
  • Item 3

TOP

.c-arrow.c-arrow--t
  • Item 1
  • Item 2
  • Item 3

TOP RIGHT

.c-arrow.c-arrow--tr
  • Item 1
  • Item 2
  • Item 3