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
BOTTOM
.c-arrow.c-arrow--b
BOTTOM RIGHT
.c-arrow.c-arrow--br
LEFT TOP
.c-arrow.c-arrow--lt
RIGHT TOP
.c-arrow.c-arrow--rt
CENTER LEFT
.c-arrow.c-arrow--l
CENTER RIGHT
.c-arrow.c-arrow--r
LEFT BOTTOM
.c-arrow.c-arrow--lb
RIGHT BOTTOM
.c-arrow.c-arrow--rb
TOP LEFT
.c-arrow.c-arrow--tl
TOP
.c-arrow.c-arrow--t
TOP RIGHT
.c-arrow.c-arrow--tr